mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-10 02:24:35 +08:00
Add end-to-end tests for Graph Explorer, History, Orchestrator, and Project features
- Implemented E2E tests for code relationship visualization in Graph Explorer. - Added tests for archived session management in History, including search, filter, restore, and delete functionalities. - Created tests for workflow orchestration in Orchestrator, covering node creation, connection, deletion, and workflow management. - Developed tests for project statistics and timeline visualization in Project, including error handling and internationalization checks.
This commit is contained in:
catlog22
480
ccw/frontend/tests/e2e/api-settings.spec.ts
Normal file
480
ccw/frontend/tests/e2e/api-settings.spec.ts
Normal file
@@ -0,0 +1,480 @@
|
||||
// ========================================
|
||||
// E2E Tests: API Settings - CLI Provider Configuration
|
||||
// ========================================
|
||||
// End-to-end tests for API provider management and testing
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupEnhancedMonitoring, switchLanguageAndVerify } from './helpers/i18n-helpers';
|
||||
|
||||
test.describe('[API Settings] - CLI Provider Configuration Tests', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/api-settings', { waitUntil: 'networkidle' as const });
|
||||
});
|
||||
|
||||
test('L3.21 - Page loads and displays current configuration', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API response for current settings
|
||||
await page.route('**/api/settings/cli', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
providers: [
|
||||
{
|
||||
id: 'provider-1',
|
||||
name: 'Gemini',
|
||||
endpoint: 'https://api.example.com',
|
||||
enabled: true
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for API settings form
|
||||
const settingsForm = page.getByTestId('api-settings-form').or(
|
||||
page.locator('form').filter({ hasText: /api|settings|provider/i })
|
||||
);
|
||||
|
||||
const isFormVisible = await settingsForm.isVisible().catch(() => false);
|
||||
|
||||
if (isFormVisible) {
|
||||
// Verify provider list is displayed
|
||||
const providerList = page.getByTestId('provider-list').or(
|
||||
settingsForm.locator('*').filter({ hasText: /provider|gemini|cli/i })
|
||||
);
|
||||
|
||||
const hasProviders = await providerList.isVisible().catch(() => false);
|
||||
expect(hasProviders).toBe(true);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.22 - Add new CLI provider', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for adding provider
|
||||
await page.route('**/api/settings/cli', (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
success: true,
|
||||
provider: {
|
||||
id: 'new-provider',
|
||||
name: 'Test Provider',
|
||||
endpoint: 'https://test.api.com'
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for add provider button
|
||||
const addButton = page.getByRole('button', { name: /add|create|new provider/i }).or(
|
||||
page.getByTestId('provider-add-button')
|
||||
);
|
||||
|
||||
const hasAddButton = await addButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasAddButton) {
|
||||
await addButton.click();
|
||||
|
||||
// Look for provider form
|
||||
const form = page.getByTestId('provider-form').or(
|
||||
page.getByRole('dialog').locator('form')
|
||||
);
|
||||
|
||||
const hasForm = await form.isVisible().catch(() => false);
|
||||
|
||||
if (hasForm) {
|
||||
// Fill in provider details
|
||||
const nameInput = form.getByRole('textbox', { name: /name/i }).or(
|
||||
form.getByLabel(/name/i)
|
||||
);
|
||||
|
||||
const hasNameInput = await nameInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasNameInput) {
|
||||
await nameInput.fill('E2E Test Provider');
|
||||
|
||||
const endpointInput = form.getByRole('textbox', { name: /endpoint|url|api/i });
|
||||
const hasEndpointInput = await endpointInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasEndpointInput) {
|
||||
await endpointInput.fill('https://e2e-test.api.com');
|
||||
|
||||
// Submit form
|
||||
const saveButton = form.getByRole('button', { name: /save|create|submit/i });
|
||||
await saveButton.click();
|
||||
|
||||
// Verify success
|
||||
const successMessage = page.getByText(/added|created|success/i);
|
||||
const hasSuccess = await successMessage.isVisible().catch(() => false);
|
||||
expect(hasSuccess).toBe(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.23 - Edit existing provider', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for editing provider
|
||||
await page.route('**/api/settings/cli', (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for existing provider
|
||||
const providerItems = page.getByTestId(/provider-item|provider-card/).or(
|
||||
page.locator('.provider-item')
|
||||
);
|
||||
|
||||
const providerCount = await providerItems.count();
|
||||
|
||||
if (providerCount > 0) {
|
||||
const firstProvider = providerItems.first();
|
||||
|
||||
// Look for edit button
|
||||
const editButton = firstProvider.getByRole('button', { name: /edit|modify/i }).or(
|
||||
firstProvider.getByTestId('edit-button')
|
||||
);
|
||||
|
||||
const hasEditButton = await editButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasEditButton) {
|
||||
await editButton.click();
|
||||
|
||||
// Edit provider details
|
||||
const nameInput = page.getByRole('textbox', { name: /name/i });
|
||||
const hasNameInput = await nameInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasNameInput) {
|
||||
await nameInput.fill('Updated Provider Name');
|
||||
|
||||
const saveButton = page.getByRole('button', { name: /save|update/i });
|
||||
await saveButton.click();
|
||||
|
||||
// Verify success
|
||||
const successMessage = page.getByText(/updated|saved|success/i);
|
||||
const hasSuccess = await successMessage.isVisible().catch(() => false);
|
||||
expect(hasSuccess).toBe(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.24 - Delete provider', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for deleting provider
|
||||
await page.route('**/api/settings/cli/*', (route) => {
|
||||
if (route.request().method() === 'DELETE') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for existing provider
|
||||
const providerItems = page.getByTestId(/provider-item|provider-card/).or(
|
||||
page.locator('.provider-item')
|
||||
);
|
||||
|
||||
const providerCount = await providerItems.count();
|
||||
|
||||
if (providerCount > 0) {
|
||||
const firstProvider = providerItems.first();
|
||||
|
||||
// Look for delete button
|
||||
const deleteButton = firstProvider.getByRole('button', { name: /delete|remove/i }).or(
|
||||
firstProvider.getByTestId('delete-button')
|
||||
);
|
||||
|
||||
const hasDeleteButton = await deleteButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasDeleteButton) {
|
||||
await deleteButton.click();
|
||||
|
||||
// Confirm deletion if dialog appears
|
||||
const confirmDialog = page.getByRole('dialog').filter({ hasText: /delete|confirm/i });
|
||||
const hasDialog = await confirmDialog.isVisible().catch(() => false);
|
||||
|
||||
if (hasDialog) {
|
||||
const confirmButton = confirmDialog.getByRole('button', { name: /delete|confirm|yes/i });
|
||||
await confirmButton.click();
|
||||
}
|
||||
|
||||
// Verify success
|
||||
const successMessage = page.getByText(/deleted|removed|success/i);
|
||||
const hasSuccess = await successMessage.isVisible().catch(() => false);
|
||||
expect(hasSuccess).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.25 - Test API connection', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for connection test
|
||||
await page.route('**/api/settings/test', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
success: true,
|
||||
latency: 45,
|
||||
status: 'connected'
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Look for test connection button
|
||||
const testButton = page.getByRole('button', { name: /test|check connection/i }).or(
|
||||
page.getByTestId('connection-test-button')
|
||||
);
|
||||
|
||||
const hasTestButton = await testButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasTestButton) {
|
||||
await testButton.click();
|
||||
|
||||
// Wait for test to complete
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Verify connection result
|
||||
const successMessage = page.getByText(/connected|success|available/i);
|
||||
const hasSuccess = await successMessage.isVisible().catch(() => false);
|
||||
expect(hasSuccess).toBe(true);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.26 - Save configuration persists', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for saving
|
||||
await page.route('**/api/settings/cli', (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true, persisted: true })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for save button
|
||||
const saveButton = page.getByRole('button', { name: /save|apply/i }).or(
|
||||
page.getByTestId('provider-save-button')
|
||||
);
|
||||
|
||||
const hasSaveButton = await saveButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasSaveButton) {
|
||||
await saveButton.click();
|
||||
|
||||
// Verify persistence via localStorage
|
||||
const configStore = await page.evaluate(() => {
|
||||
const storage = localStorage.getItem('ccw-config-store');
|
||||
return storage ? JSON.parse(storage) : null;
|
||||
});
|
||||
|
||||
const hasPersisted = configStore !== null;
|
||||
expect(hasPersisted).toBe(true);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.27 - i18n - Form labels in EN/ZH', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Get language switcher
|
||||
const languageSwitcher = page.getByRole('combobox', { name: /select language|language/i }).first();
|
||||
|
||||
const hasLanguageSwitcher = await languageSwitcher.isVisible().catch(() => false);
|
||||
|
||||
if (hasLanguageSwitcher) {
|
||||
// Switch to Chinese
|
||||
await switchLanguageAndVerify(page, 'zh', languageSwitcher);
|
||||
|
||||
// Verify form is visible in Chinese
|
||||
const form = page.getByTestId('api-settings-form').or(
|
||||
page.locator('form')
|
||||
);
|
||||
|
||||
const isFormVisible = await form.isVisible().catch(() => false);
|
||||
expect(isFormVisible).toBe(true);
|
||||
|
||||
// Check for Chinese text
|
||||
const pageContent = await page.content();
|
||||
const hasChineseText = /[\u4e00-\u9fa5]/.test(pageContent);
|
||||
expect(hasChineseText).toBe(true);
|
||||
|
||||
// Switch back to English
|
||||
await switchLanguageAndVerify(page, 'en', languageSwitcher);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.28 - Error - Invalid API endpoint', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API error for invalid endpoint
|
||||
await page.route('**/api/settings/test', (route) => {
|
||||
route.fulfill({
|
||||
status: 400,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
error: 'Invalid endpoint URL',
|
||||
details: 'Endpoint must be a valid HTTPS URL'
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Look for endpoint input
|
||||
const endpointInput = page.getByRole('textbox', { name: /endpoint|url|api/i }).or(
|
||||
page.getByLabel(/endpoint|url/i)
|
||||
);
|
||||
|
||||
const hasEndpointInput = await endpointInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasEndpointInput) {
|
||||
await endpointInput.fill('not-a-valid-url');
|
||||
|
||||
const testButton = page.getByRole('button', { name: /test|validate/i });
|
||||
const hasTestButton = await testButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasTestButton) {
|
||||
await testButton.click();
|
||||
|
||||
// Verify error message
|
||||
const errorMessage = page.getByText(/invalid|error|url/i);
|
||||
const hasError = await errorMessage.isVisible().catch(() => false);
|
||||
expect(hasError).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/settings/test'], allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.29 - Error - Connection timeout', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock timeout
|
||||
await page.route('**/api/settings/test', (route) => {
|
||||
// Simulate timeout by never responding
|
||||
setTimeout(() => {
|
||||
route.abort('timedout');
|
||||
}, 35000);
|
||||
});
|
||||
|
||||
// Look for test connection button
|
||||
const testButton = page.getByRole('button', { name: /test|check/i });
|
||||
|
||||
const hasTestButton = await testButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasTestButton) {
|
||||
await testButton.click();
|
||||
|
||||
// Wait for timeout message
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Verify timeout error
|
||||
const timeoutMessage = page.getByText(/timeout|timed out|unavailable/i);
|
||||
const hasTimeout = await timeoutMessage.isVisible().catch(() => false);
|
||||
// Timeout message may or may not appear
|
||||
}
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/settings/test'], allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.30 - Edge - Maximum providers limit', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API to enforce limit
|
||||
await page.route('**/api/settings/cli', (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
route.fulfill({
|
||||
status: 409,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
error: 'Maximum provider limit reached',
|
||||
limit: 10
|
||||
})
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for add provider button
|
||||
const addButton = page.getByRole('button', { name: /add|create/i });
|
||||
|
||||
const hasAddButton = await addButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasAddButton) {
|
||||
await addButton.click();
|
||||
|
||||
// Try to add provider
|
||||
const nameInput = page.getByRole('textbox', { name: /name/i });
|
||||
const hasNameInput = await nameInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasNameInput) {
|
||||
await nameInput.fill('Test Provider');
|
||||
|
||||
const saveButton = page.getByRole('button', { name: /save|create/i });
|
||||
await saveButton.click();
|
||||
|
||||
// Look for limit error
|
||||
const limitMessage = page.getByText(/limit|maximum|too many/i);
|
||||
const hasLimitMessage = await limitMessage.isVisible().catch(() => false);
|
||||
// Limit message may or may not appear
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/settings/cli'], allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
});
|
||||
@@ -18,7 +18,7 @@ test.describe('[Dashboard Charts] - Chart Rendering & Interaction Tests', () =>
|
||||
await waitForDashboardLoad(page);
|
||||
});
|
||||
|
||||
describe('Pie Chart Rendering', () => {
|
||||
test.describe('Pie Chart Rendering', () => {
|
||||
test('DC-1.1 - should render workflow status pie chart with data', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -84,7 +84,7 @@ test.describe('[Dashboard Charts] - Chart Rendering & Interaction Tests', () =>
|
||||
});
|
||||
});
|
||||
|
||||
describe('Line Chart Rendering', () => {
|
||||
test.describe('Line Chart Rendering', () => {
|
||||
test('DC-2.1 - should render activity timeline line chart', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -167,7 +167,7 @@ test.describe('[Dashboard Charts] - Chart Rendering & Interaction Tests', () =>
|
||||
});
|
||||
});
|
||||
|
||||
describe('Bar Chart Rendering', () => {
|
||||
test.describe('Bar Chart Rendering', () => {
|
||||
test('DC-3.1 - should render task type bar chart', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -232,7 +232,7 @@ test.describe('[Dashboard Charts] - Chart Rendering & Interaction Tests', () =>
|
||||
});
|
||||
});
|
||||
|
||||
describe('Chart Responsiveness', () => {
|
||||
test.describe('Chart Responsiveness', () => {
|
||||
test('DC-4.1 - should resize charts on mobile viewport', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -290,7 +290,7 @@ test.describe('[Dashboard Charts] - Chart Rendering & Interaction Tests', () =>
|
||||
});
|
||||
});
|
||||
|
||||
describe('Chart Empty States', () => {
|
||||
test.describe('Chart Empty States', () => {
|
||||
test('DC-5.1 - should display empty state when no data available', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -342,7 +342,7 @@ test.describe('[Dashboard Charts] - Chart Rendering & Interaction Tests', () =>
|
||||
});
|
||||
});
|
||||
|
||||
describe('Chart Legend Interaction', () => {
|
||||
test.describe('Chart Legend Interaction', () => {
|
||||
test('DC-6.1 - should toggle line visibility when clicking legend', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -373,7 +373,7 @@ test.describe('[Dashboard Charts] - Chart Rendering & Interaction Tests', () =>
|
||||
});
|
||||
});
|
||||
|
||||
describe('Chart Performance', () => {
|
||||
test.describe('Chart Performance', () => {
|
||||
test('DC-7.1 - should render all charts within performance budget', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ test.describe('[Dashboard Redesign] - Navigation & Layout Tests', () => {
|
||||
await waitForDashboardLoad(page);
|
||||
});
|
||||
|
||||
describe('Navigation Grouping', () => {
|
||||
test.describe('Navigation Grouping', () => {
|
||||
test('DR-1.1 - should display all 6 navigation groups', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -146,7 +146,7 @@ test.describe('[Dashboard Redesign] - Navigation & Layout Tests', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dashboard Loading', () => {
|
||||
test.describe('Dashboard Loading', () => {
|
||||
test('DR-2.1 - should load all 5 widgets successfully', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -213,7 +213,7 @@ test.describe('[Dashboard Redesign] - Navigation & Layout Tests', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Drag-Drop Persistence', () => {
|
||||
test.describe('Drag-Drop Persistence', () => {
|
||||
test('DR-3.1 - should allow dragging widgets to new positions', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -293,7 +293,7 @@ test.describe('[Dashboard Redesign] - Navigation & Layout Tests', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Ticker Real-time Updates', () => {
|
||||
test.describe('Ticker Real-time Updates', () => {
|
||||
test('DR-4.1 - should display ticker marquee component', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
@@ -374,7 +374,7 @@ test.describe('[Dashboard Redesign] - Navigation & Layout Tests', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Responsive Layout', () => {
|
||||
test.describe('Responsive Layout', () => {
|
||||
test('DR-5.1 - should adapt layout for mobile viewport', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
|
||||
205
ccw/frontend/tests/e2e/explorer.spec.ts
Normal file
205
ccw/frontend/tests/e2e/explorer.spec.ts
Normal file
@@ -0,0 +1,205 @@
|
||||
// ========================================
|
||||
// E2E Tests: Explorer - File System Navigation
|
||||
// ========================================
|
||||
// End-to-end tests for file explorer with tree navigation and file details
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupEnhancedMonitoring, switchLanguageAndVerify } from './helpers/i18n-helpers';
|
||||
|
||||
test.describe('[Explorer] - File System Navigation Tests', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/explorer', { waitUntil: 'networkidle' as const });
|
||||
});
|
||||
|
||||
test('L3.45 - Page loads and displays file tree', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for file tree
|
||||
await page.route('**/api/explorer', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
files: [
|
||||
{
|
||||
id: 'file-1',
|
||||
name: 'src',
|
||||
type: 'directory',
|
||||
children: [
|
||||
{ id: 'file-2', name: 'index.ts', type: 'file' }
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for file tree
|
||||
const fileTree = page.getByTestId('file-tree').or(
|
||||
page.locator('.file-tree')
|
||||
);
|
||||
|
||||
const isTreeVisible = await fileTree.isVisible().catch(() => false);
|
||||
|
||||
if (isTreeVisible) {
|
||||
// Verify tree nodes are displayed
|
||||
const treeNodes = page.getByTestId(/tree-node|file-node|directory-node/).or(
|
||||
page.locator('.tree-node')
|
||||
);
|
||||
|
||||
const nodeCount = await treeNodes.count();
|
||||
expect(nodeCount).toBeGreaterThan(0);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.46 - Navigate directories', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Look for directory nodes
|
||||
const directoryNodes = page.getByTestId(/directory-node|folder-node/).or(
|
||||
page.locator('.directory-node')
|
||||
);
|
||||
|
||||
const nodeCount = await directoryNodes.count();
|
||||
|
||||
if (nodeCount > 0) {
|
||||
const firstDirectory = directoryNodes.first();
|
||||
|
||||
// Click to expand
|
||||
await firstDirectory.click();
|
||||
|
||||
// Wait for children to load
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
// Verify directory state changed
|
||||
const isExpanded = await firstDirectory.getAttribute('aria-expanded');
|
||||
expect(isExpanded).toBe('true');
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.47 - View file details', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Look for file nodes
|
||||
const fileNodes = page.getByTestId(/file-node/).filter({ hasText: /\.(ts|tsx|js|jsx)$/i }).or(
|
||||
page.locator('.file-node').filter({ hasText: /\.(ts|tsx|js|jsx)$/i })
|
||||
);
|
||||
|
||||
const fileCount = await fileNodes.count();
|
||||
|
||||
if (fileCount > 0) {
|
||||
const firstFile = fileNodes.first();
|
||||
|
||||
// Click to view details
|
||||
await firstFile.click();
|
||||
|
||||
// Look for file details panel
|
||||
const detailsPanel = page.getByTestId('file-details-panel').or(
|
||||
page.locator('.file-details')
|
||||
);
|
||||
|
||||
const hasDetails = await detailsPanel.isVisible().catch(() => false);
|
||||
|
||||
if (hasDetails) {
|
||||
expect(detailsPanel).toBeVisible();
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.48 - i18n - File tree labels in EN/ZH', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Get language switcher
|
||||
const languageSwitcher = page.getByRole('combobox', { name: /select language|language/i }).first();
|
||||
|
||||
const hasLanguageSwitcher = await languageSwitcher.isVisible().catch(() => false);
|
||||
|
||||
if (hasLanguageSwitcher) {
|
||||
// Switch to Chinese
|
||||
await switchLanguageAndVerify(page, 'zh', languageSwitcher);
|
||||
|
||||
// Verify file tree content
|
||||
const fileTree = page.getByTestId('file-tree').or(
|
||||
page.locator('.file-tree')
|
||||
);
|
||||
|
||||
const isTreeVisible = await fileTree.isVisible().catch(() => false);
|
||||
expect(isTreeVisible).toBe(true);
|
||||
|
||||
// Switch back to English
|
||||
await switchLanguageAndVerify(page, 'en', languageSwitcher);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.49 - Error - Directory not found', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API error
|
||||
await page.route('**/api/explorer', (route) => {
|
||||
route.fulfill({
|
||||
status: 404,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'Directory not found' })
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for error indicator
|
||||
const errorIndicator = page.getByText(/not found|error|unable/i).or(
|
||||
page.getByTestId('error-state')
|
||||
);
|
||||
|
||||
const hasError = await errorIndicator.isVisible().catch(() => false);
|
||||
|
||||
if (hasError) {
|
||||
expect(errorIndicator).toBeVisible();
|
||||
}
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/explorer'], allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.50 - Edge - Empty directory', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for empty directory
|
||||
await page.route('**/api/explorer', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ files: [] })
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for empty state
|
||||
const emptyState = page.getByText(/empty|no files|directory is empty/i);
|
||||
const hasEmptyState = await emptyState.isVisible().catch(() => false);
|
||||
|
||||
if (hasEmptyState) {
|
||||
expect(emptyState).toBeVisible();
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
});
|
||||
198
ccw/frontend/tests/e2e/graph.spec.ts
Normal file
198
ccw/frontend/tests/e2e/graph.spec.ts
Normal file
@@ -0,0 +1,198 @@
|
||||
// ========================================
|
||||
// E2E Tests: Graph Explorer - Code Relationship Visualization
|
||||
// ========================================
|
||||
// End-to-end tests for code graph visualization with node relationships
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupEnhancedMonitoring, switchLanguageAndVerify } from './helpers/i18n-helpers';
|
||||
|
||||
test.describe('[Graph Explorer] - Code Relationship Visualization Tests', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/graph', { waitUntil: 'networkidle' as const });
|
||||
});
|
||||
|
||||
test('L3.51 - Page loads and displays code graph', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for graph data
|
||||
await page.route('**/api/graph', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
nodes: [
|
||||
{ id: 'node-1', label: 'Component', type: 'component' },
|
||||
{ id: 'node-2', label: 'Service', type: 'service' }
|
||||
],
|
||||
edges: [
|
||||
{ id: 'edge-1', source: 'node-1', target: 'node-2', label: 'imports' }
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for code graph
|
||||
const codeGraph = page.getByTestId('code-graph').or(
|
||||
page.locator('.code-graph')
|
||||
);
|
||||
|
||||
const isGraphVisible = await codeGraph.isVisible().catch(() => false);
|
||||
|
||||
if (isGraphVisible) {
|
||||
// Verify graph has nodes
|
||||
const graphNodes = page.getByTestId(/graph-node|node-/).or(
|
||||
page.locator('.graph-node')
|
||||
);
|
||||
|
||||
const nodeCount = await graphNodes.count();
|
||||
expect(nodeCount).toBeGreaterThan(0);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.52 - Navigate graph nodes', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Look for graph nodes
|
||||
const graphNodes = page.getByTestId(/graph-node|node-/).or(
|
||||
page.locator('.graph-node')
|
||||
);
|
||||
|
||||
const nodeCount = await graphNodes.count();
|
||||
|
||||
if (nodeCount > 0) {
|
||||
const firstNode = graphNodes.first();
|
||||
|
||||
// Click to select node
|
||||
await firstNode.click();
|
||||
|
||||
// Verify node is selected
|
||||
const isSelected = await firstNode.getAttribute('aria-selected');
|
||||
expect(isSelected).toBe('true');
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.53 - Expand/collapse node relationships', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Look for expandable nodes
|
||||
const expandableNodes = page.getByTestId(/graph-node/).filter({ hasText: /\+/ });
|
||||
|
||||
const nodeCount = await expandableNodes.count();
|
||||
|
||||
if (nodeCount > 0) {
|
||||
const firstNode = expandableNodes.first();
|
||||
|
||||
// Click to expand
|
||||
await firstNode.click();
|
||||
|
||||
// Wait for expansion
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
// Look for expanded children
|
||||
const childNodes = page.getByTestId(/graph-node/);
|
||||
const nodeCountAfter = await childNodes.count();
|
||||
|
||||
expect(nodeCountAfter).toBeGreaterThanOrEqual(0);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.54 - i18n - Graph labels in EN/ZH', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Get language switcher
|
||||
const languageSwitcher = page.getByRole('combobox', { name: /select language|language/i }).first();
|
||||
|
||||
const hasLanguageSwitcher = await languageSwitcher.isVisible().catch(() => false);
|
||||
|
||||
if (hasLanguageSwitcher) {
|
||||
// Switch to Chinese
|
||||
await switchLanguageAndVerify(page, 'zh', languageSwitcher);
|
||||
|
||||
// Verify graph is visible
|
||||
const codeGraph = page.getByTestId('code-graph').or(
|
||||
page.locator('.code-graph')
|
||||
);
|
||||
|
||||
const isGraphVisible = await codeGraph.isVisible().catch(() => false);
|
||||
expect(isGraphVisible).toBe(true);
|
||||
|
||||
// Switch back to English
|
||||
await switchLanguageAndVerify(page, 'en', languageSwitcher);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.55 - Error - Graph generation fails', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API error
|
||||
await page.route('**/api/graph', (route) => {
|
||||
route.fulfill({
|
||||
status: 500,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'Failed to generate graph' })
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for error indicator
|
||||
const errorIndicator = page.getByText(/error|failed|unable/i).or(
|
||||
page.getByTestId('error-state')
|
||||
);
|
||||
|
||||
const hasError = await errorIndicator.isVisible().catch(() => false);
|
||||
|
||||
if (hasError) {
|
||||
expect(errorIndicator).toBeVisible();
|
||||
}
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/graph'], allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.56 - Edge - No relationships found', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for empty graph
|
||||
await page.route('**/api/graph', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
nodes: [],
|
||||
edges: []
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for empty state
|
||||
const emptyState = page.getByText(/no relationships|empty|no data/i);
|
||||
const hasEmptyState = await emptyState.isVisible().catch(() => false);
|
||||
|
||||
if (hasEmptyState) {
|
||||
expect(emptyState).toBeVisible();
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
});
|
||||
356
ccw/frontend/tests/e2e/history.spec.ts
Normal file
356
ccw/frontend/tests/e2e/history.spec.ts
Normal file
@@ -0,0 +1,356 @@
|
||||
// ========================================
|
||||
// E2E Tests: History - Archived Session Management
|
||||
// ========================================
|
||||
// End-to-end tests for history page with search, filter, restore operations
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupEnhancedMonitoring, switchLanguageAndVerify } from './helpers/i18n-helpers';
|
||||
|
||||
test.describe('[History] - Archived Session Management Tests', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/history', { waitUntil: 'networkidle' as const });
|
||||
});
|
||||
|
||||
test('L3.31 - Page loads and displays archived sessions', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for history
|
||||
await page.route('**/api/history', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
sessions: [
|
||||
{
|
||||
id: 'session-1',
|
||||
title: 'Archived Session 1',
|
||||
archivedAt: Date.now(),
|
||||
status: 'completed'
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for history list
|
||||
const historyList = page.getByTestId('history-list').or(
|
||||
page.locator('.history-list')
|
||||
);
|
||||
|
||||
const isListVisible = await historyList.isVisible().catch(() => false);
|
||||
|
||||
if (isListVisible) {
|
||||
// Verify session items are displayed
|
||||
const sessionItems = page.getByTestId(/session-item|history-item/).or(
|
||||
page.locator('.history-item')
|
||||
);
|
||||
|
||||
const itemCount = await sessionItems.count();
|
||||
expect(itemCount).toBeGreaterThanOrEqual(0);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.32 - Search archived sessions', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for search
|
||||
await page.route('**/api/history?q=**', (route) => {
|
||||
const requestUrl = route.request().url();
|
||||
const url = new URL(requestUrl);
|
||||
const query = url.searchParams.get('q');
|
||||
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
sessions: [
|
||||
{
|
||||
id: 'session-search',
|
||||
title: `Search Result for ${query}`,
|
||||
archivedAt: Date.now()
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Look for search input
|
||||
const searchInput = page.getByRole('textbox', { name: /search|find/i }).or(
|
||||
page.getByTestId('search-input')
|
||||
);
|
||||
|
||||
const hasSearchInput = await searchInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasSearchInput) {
|
||||
await searchInput.fill('test');
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Verify search was performed
|
||||
const searchResults = page.getByTestId(/history-item|session-item/);
|
||||
const resultCount = await searchResults.count();
|
||||
expect(resultCount).toBeGreaterThanOrEqual(0);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.33 - Filter by date range', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for date filter
|
||||
await page.route('**/api/history**', (route) => {
|
||||
const requestUrl = route.request().url();
|
||||
const url = new URL(requestUrl);
|
||||
const fromDate = url.searchParams.get('from');
|
||||
const toDate = url.searchParams.get('to');
|
||||
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
sessions: [
|
||||
{
|
||||
id: 'session-filtered',
|
||||
title: 'Filtered by Date',
|
||||
archivedAt: Date.now()
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Look for date filter controls
|
||||
const dateFilter = page.getByTestId('date-filter').or(
|
||||
page.locator('*').filter({ hasText: /date|filter/i })
|
||||
);
|
||||
|
||||
const hasDateFilter = await dateFilter.isVisible().catch(() => false);
|
||||
|
||||
if (hasDateFilter) {
|
||||
const fromDateInput = page.getByRole('textbox', { name: /from|start/i });
|
||||
const hasFromDate = await fromDateInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasFromDate) {
|
||||
await fromDateInput.fill('2024-01-01');
|
||||
|
||||
const toDateInput = page.getByRole('textbox', { name: /to|end/i });
|
||||
const hasToDate = await toDateInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasToDate) {
|
||||
await toDateInput.fill('2024-12-31');
|
||||
|
||||
// Look for apply button
|
||||
const applyButton = page.getByRole('button', { name: /apply|filter/i });
|
||||
const hasApplyButton = await applyButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasApplyButton) {
|
||||
await applyButton.click();
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.34 - Restore archived session', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for restore
|
||||
await page.route('**/api/history/*/restore', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true, sessionId: 'restored-session' })
|
||||
});
|
||||
});
|
||||
|
||||
// Look for archived session
|
||||
const sessionItems = page.getByTestId(/session-item|history-item/).or(
|
||||
page.locator('.history-item')
|
||||
);
|
||||
|
||||
const itemCount = await sessionItems.count();
|
||||
|
||||
if (itemCount > 0) {
|
||||
const firstSession = sessionItems.first();
|
||||
|
||||
// Look for restore button
|
||||
const restoreButton = firstSession.getByRole('button', { name: /restore|reload/i }).or(
|
||||
firstSession.getByTestId('restore-button')
|
||||
);
|
||||
|
||||
const hasRestoreButton = await restoreButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasRestoreButton) {
|
||||
await restoreButton.click();
|
||||
|
||||
// Verify success message
|
||||
const successMessage = page.getByText(/restored|success/i);
|
||||
const hasSuccess = await successMessage.isVisible().catch(() => false);
|
||||
expect(hasSuccess).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.35 - Delete archived session', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for delete
|
||||
await page.route('**/api/history/*', (route) => {
|
||||
if (route.request().method() === 'DELETE') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for archived session
|
||||
const sessionItems = page.getByTestId(/session-item|history-item/).or(
|
||||
page.locator('.history-item')
|
||||
);
|
||||
|
||||
const itemCount = await sessionItems.count();
|
||||
|
||||
if (itemCount > 0) {
|
||||
const firstSession = sessionItems.first();
|
||||
|
||||
// Look for delete button
|
||||
const deleteButton = firstSession.getByRole('button', { name: /delete|remove/i }).or(
|
||||
firstSession.getByTestId('delete-button')
|
||||
);
|
||||
|
||||
const hasDeleteButton = await deleteButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasDeleteButton) {
|
||||
await deleteButton.click();
|
||||
|
||||
// Confirm deletion if dialog appears
|
||||
const confirmDialog = page.getByRole('dialog').filter({ hasText: /delete|confirm/i });
|
||||
const hasDialog = await confirmDialog.isVisible().catch(() => false);
|
||||
|
||||
if (hasDialog) {
|
||||
const confirmButton = confirmDialog.getByRole('button', { name: /delete|confirm|yes/i });
|
||||
await confirmButton.click();
|
||||
}
|
||||
|
||||
// Verify success message
|
||||
const successMessage = page.getByText(/deleted|success/i);
|
||||
const hasSuccess = await successMessage.isVisible().catch(() => false);
|
||||
expect(hasSuccess).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.36 - i18n - Archive messages in EN/ZH', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Get language switcher
|
||||
const languageSwitcher = page.getByRole('combobox', { name: /select language|language/i }).first();
|
||||
|
||||
const hasLanguageSwitcher = await languageSwitcher.isVisible().catch(() => false);
|
||||
|
||||
if (hasLanguageSwitcher) {
|
||||
// Switch to Chinese
|
||||
await switchLanguageAndVerify(page, 'zh', languageSwitcher);
|
||||
|
||||
// Verify history content is in Chinese
|
||||
const pageContent = await page.content();
|
||||
const hasChineseText = /[\u4e00-\u9fa5]/.test(pageContent);
|
||||
expect(hasChineseText).toBe(true);
|
||||
|
||||
// Switch back to English
|
||||
await switchLanguageAndVerify(page, 'en', languageSwitcher);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.37 - Error - Restore fails', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API error for restore
|
||||
await page.route('**/api/history/*/restore', (route) => {
|
||||
route.fulfill({
|
||||
status: 500,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'Failed to restore session' })
|
||||
});
|
||||
});
|
||||
|
||||
// Look for archived session
|
||||
const sessionItems = page.getByTestId(/session-item|history-item/).or(
|
||||
page.locator('.history-item')
|
||||
);
|
||||
|
||||
const itemCount = await sessionItems.count();
|
||||
|
||||
if (itemCount > 0) {
|
||||
const firstSession = sessionItems.first();
|
||||
|
||||
// Look for restore button
|
||||
const restoreButton = firstSession.getByRole('button', { name: /restore|reload/i });
|
||||
|
||||
const hasRestoreButton = await restoreButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasRestoreButton) {
|
||||
await restoreButton.click();
|
||||
|
||||
// Verify error message
|
||||
const errorMessage = page.getByText(/error|failed|unable/i);
|
||||
const hasError = await errorMessage.isVisible().catch(() => false);
|
||||
expect(hasError).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/history'], allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.38 - Edge - Empty archive state', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for empty history
|
||||
await page.route('**/api/history', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ sessions: [] })
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for empty state
|
||||
const emptyState = page.getByTestId('empty-state').or(
|
||||
page.getByText(/no history|empty|no sessions/i)
|
||||
);
|
||||
|
||||
const hasEmptyState = await emptyState.isVisible().catch(() => false);
|
||||
expect(hasEmptyState).toBe(true);
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
});
|
||||
@@ -1,273 +1,197 @@
|
||||
// ========================================
|
||||
// E2E Tests: Loops Management
|
||||
// E2E Tests: Loops Monitor - Real-time Workflow Execution
|
||||
// ========================================
|
||||
// End-to-end tests for loop CRUD operations and controls
|
||||
// End-to-end tests for loop monitoring with WebSocket mocking
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupEnhancedMonitoring } from './helpers/i18n-helpers';
|
||||
import { setupEnhancedMonitoring, switchLanguageAndVerify } from './helpers/i18n-helpers';
|
||||
|
||||
test.describe('[Loops] - Loop Management Tests', () => {
|
||||
test.describe('[Loops Monitor] - Real-time Loop Tracking Tests', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/', { waitUntil: 'networkidle' as const });
|
||||
// Mock WebSocket connection for real-time updates
|
||||
await page.route('**/ws/loops**', (route) => {
|
||||
route.fulfill({
|
||||
status: 101,
|
||||
headers: {
|
||||
'Connection': 'Upgrade',
|
||||
'Upgrade': 'websocket'
|
||||
},
|
||||
body: ''
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('L3.1 - should display loops list', async ({ page }) => {
|
||||
test('L3.13 - Page loads and displays active loops', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Navigate to loops page
|
||||
// Mock API for loops list
|
||||
await page.route('**/api/loops', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
loops: [
|
||||
{
|
||||
id: 'loop-1',
|
||||
name: 'Test Loop',
|
||||
status: 'running',
|
||||
progress: 50,
|
||||
startedAt: Date.now()
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for loops list container
|
||||
// Look for loops list
|
||||
const loopsList = page.getByTestId('loops-list').or(
|
||||
page.locator('.loops-list')
|
||||
);
|
||||
|
||||
const isVisible = await loopsList.isVisible().catch(() => false);
|
||||
const isListVisible = await loopsList.isVisible().catch(() => false);
|
||||
|
||||
if (isVisible) {
|
||||
// Verify loop items exist or empty state is shown
|
||||
if (isListVisible) {
|
||||
// Verify loop items are displayed
|
||||
const loopItems = page.getByTestId(/loop-item|loop-card/).or(
|
||||
page.locator('.loop-item')
|
||||
);
|
||||
|
||||
const itemCount = await loopItems.count();
|
||||
|
||||
if (itemCount === 0) {
|
||||
const emptyState = page.getByTestId('empty-state').or(
|
||||
page.getByText(/no loops/i)
|
||||
);
|
||||
const hasEmptyState = await emptyState.isVisible().catch(() => false);
|
||||
expect(hasEmptyState).toBe(true);
|
||||
}
|
||||
expect(itemCount).toBeGreaterThanOrEqual(0);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.2 - should create new loop', async ({ page }) => {
|
||||
test('L3.14 - Real-time loop status updates (mock WS)', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Navigate to loops page
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for create loop button
|
||||
const createButton = page.getByRole('button', { name: /create|new|add loop/i }).or(
|
||||
page.getByTestId('create-loop-button')
|
||||
// Inject mock WebSocket message for status update
|
||||
await page.evaluate(() => {
|
||||
const event = new MessageEvent('message', {
|
||||
data: JSON.stringify({
|
||||
type: 'loop-update',
|
||||
loopId: 'loop-1',
|
||||
status: 'running',
|
||||
progress: 75
|
||||
})
|
||||
});
|
||||
|
||||
window.dispatchEvent(event);
|
||||
});
|
||||
|
||||
// Wait for update to be processed
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Look for updated status display
|
||||
const statusBadge = page.getByTestId('loop-status-badge').or(
|
||||
page.locator('*').filter({ hasText: /running|75%/i })
|
||||
);
|
||||
|
||||
const hasCreateButton = await createButton.isVisible().catch(() => false);
|
||||
const hasStatus = await statusBadge.isVisible().catch(() => false);
|
||||
// Status update may or may not be visible
|
||||
|
||||
if (hasCreateButton) {
|
||||
await createButton.click();
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
// Look for create loop dialog/form
|
||||
const dialog = page.getByRole('dialog').filter({ hasText: /create loop|new loop/i });
|
||||
const form = page.getByTestId('create-loop-form');
|
||||
test('L3.15 - Filter loops by status', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
const hasDialog = await dialog.isVisible().catch(() => false);
|
||||
const hasForm = await form.isVisible().catch(() => false);
|
||||
// Mock API for filtered loops
|
||||
await page.route('**/api/loops?status=**', (route) => {
|
||||
const requestUrl = route.request().url();
|
||||
const url = new URL(requestUrl);
|
||||
const status = url.searchParams.get('status');
|
||||
|
||||
if (hasDialog || hasForm) {
|
||||
// Fill in loop details
|
||||
const promptInput = page.getByRole('textbox', { name: /prompt|description/i }).or(
|
||||
page.getByLabel(/prompt|description/i)
|
||||
);
|
||||
|
||||
const hasPromptInput = await promptInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasPromptInput) {
|
||||
await promptInput.fill('E2E Test Loop prompt');
|
||||
|
||||
// Select tool if available
|
||||
const toolSelect = page.getByRole('combobox', { name: /tool/i });
|
||||
const hasToolSelect = await toolSelect.isVisible().catch(() => false);
|
||||
|
||||
if (hasToolSelect) {
|
||||
const toolOptions = await toolSelect.locator('option').count();
|
||||
if (toolOptions > 0) {
|
||||
await toolSelect.selectOption({ index: 0 });
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
loops: [
|
||||
{
|
||||
id: `loop-${status}`,
|
||||
name: `Filtered ${status} Loop`,
|
||||
status: status
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
const submitButton = page.getByRole('button', { name: /create|save|submit|start/i });
|
||||
await submitButton.click();
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Verify loop was created
|
||||
// Look for status filter
|
||||
const statusFilter = page.getByRole('combobox', { name: /status|filter/i }).or(
|
||||
page.getByTestId('status-filter')
|
||||
);
|
||||
|
||||
const successMessage = page.getByText(/created|started|success/i).or(
|
||||
page.getByTestId('success-message')
|
||||
);
|
||||
const hasFilter = await statusFilter.isVisible().catch(() => false);
|
||||
|
||||
const hasSuccess = await successMessage.isVisible().catch(() => false);
|
||||
expect(hasSuccess).toBe(true);
|
||||
}
|
||||
}
|
||||
if (hasFilter) {
|
||||
await statusFilter.selectOption('running');
|
||||
|
||||
// Wait for filtered results
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Verify filter applied
|
||||
const currentUrl = page.url();
|
||||
const hasFilterParam = currentUrl.includes('status=');
|
||||
// URL may or may not have filter parameter
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.3 - should pause running loop', async ({ page }) => {
|
||||
test('L3.16 - Terminate running loop', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Navigate to loops page
|
||||
// Mock API for termination
|
||||
await page.route('**/api/loops/*/terminate', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true, status: 'terminated' })
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for running loop
|
||||
const runningLoops = page.getByTestId(/loop-item|loop-card/).filter({ hasText: /running|active/i }).or(
|
||||
page.locator('.loop-item').filter({ hasText: /running|active/i })
|
||||
);
|
||||
const runningLoops = page.locator('.loop-item').filter({ hasText: /running|active/i });
|
||||
|
||||
const count = await runningLoops.count();
|
||||
|
||||
if (count > 0) {
|
||||
const firstLoop = runningLoops.first();
|
||||
|
||||
// Look for pause button
|
||||
const pauseButton = firstLoop.getByRole('button', { name: /pause/i }).or(
|
||||
firstLoop.getByTestId('pause-button')
|
||||
// Look for terminate button
|
||||
const terminateButton = firstLoop.getByRole('button', { name: /terminate|stop|end/i }).or(
|
||||
firstLoop.getByTestId('loop-terminate-button')
|
||||
);
|
||||
|
||||
const hasPauseButton = await pauseButton.isVisible().catch(() => false);
|
||||
const hasTerminateButton = await terminateButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasPauseButton) {
|
||||
await pauseButton.click();
|
||||
if (hasTerminateButton) {
|
||||
await terminateButton.click();
|
||||
|
||||
// Verify loop is paused
|
||||
|
||||
const pausedIndicator = firstLoop.getByText(/paused/i);
|
||||
const hasPaused = await pausedIndicator.isVisible().catch(() => false);
|
||||
expect(hasPaused).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.4 - should resume paused loop', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Navigate to loops page
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for paused loop
|
||||
const pausedLoops = page.getByTestId(/loop-item|loop-card/).filter({ hasText: /paused/i }).or(
|
||||
page.locator('.loop-item').filter({ hasText: /paused/i })
|
||||
);
|
||||
|
||||
const count = await pausedLoops.count();
|
||||
|
||||
if (count > 0) {
|
||||
const firstLoop = pausedLoops.first();
|
||||
|
||||
// Look for resume button
|
||||
const resumeButton = firstLoop.getByRole('button', { name: /resume|continue/i }).or(
|
||||
firstLoop.getByTestId('resume-button')
|
||||
);
|
||||
|
||||
const hasResumeButton = await resumeButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasResumeButton) {
|
||||
await resumeButton.click();
|
||||
|
||||
// Verify loop is resumed
|
||||
|
||||
const runningIndicator = firstLoop.getByText(/running|active/i);
|
||||
const hasRunning = await runningIndicator.isVisible().catch(() => false);
|
||||
expect(hasRunning).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.5 - should stop loop', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Navigate to loops page
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for active/paused loop
|
||||
const activeLoops = page.locator('.loop-item').filter({ hasText: /running|paused|active/i });
|
||||
|
||||
const count = await activeLoops.count();
|
||||
|
||||
if (count > 0) {
|
||||
const firstLoop = activeLoops.first();
|
||||
|
||||
// Look for stop button
|
||||
const stopButton = firstLoop.getByRole('button', { name: /stop/i }).or(
|
||||
firstLoop.getByTestId('stop-button')
|
||||
);
|
||||
|
||||
const hasStopButton = await stopButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasStopButton) {
|
||||
await stopButton.click();
|
||||
|
||||
// Confirm stop if dialog appears
|
||||
const confirmDialog = page.getByRole('dialog').filter({ hasText: /stop|confirm/i });
|
||||
// Confirm if dialog appears
|
||||
const confirmDialog = page.getByRole('dialog').filter({ hasText: /terminate|confirm/i });
|
||||
const hasDialog = await confirmDialog.isVisible().catch(() => false);
|
||||
|
||||
if (hasDialog) {
|
||||
const confirmButton = page.getByRole('button', { name: /stop|confirm|yes/i });
|
||||
const confirmButton = confirmDialog.getByRole('button', { name: /terminate|confirm|yes/i });
|
||||
await confirmButton.click();
|
||||
}
|
||||
|
||||
// Verify loop is stopped
|
||||
|
||||
const stoppedIndicator = firstLoop.getByText(/stopped|completed/i);
|
||||
const hasStopped = await stoppedIndicator.isVisible().catch(() => false);
|
||||
expect(hasStopped).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.6 - should delete loop', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Navigate to loops page
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for existing loop
|
||||
const loopItems = page.getByTestId(/loop-item|loop-card/).or(
|
||||
page.locator('.loop-item')
|
||||
);
|
||||
|
||||
const itemCount = await loopItems.count();
|
||||
|
||||
if (itemCount > 0) {
|
||||
const firstLoop = loopItems.first();
|
||||
|
||||
// Look for delete button
|
||||
const deleteButton = firstLoop.getByRole('button', { name: /delete|remove/i }).or(
|
||||
firstLoop.getByTestId('delete-button')
|
||||
);
|
||||
|
||||
const hasDeleteButton = await deleteButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasDeleteButton) {
|
||||
await deleteButton.click();
|
||||
|
||||
// Confirm delete if dialog appears
|
||||
const confirmDialog = page.getByRole('dialog').filter({ hasText: /delete|confirm/i });
|
||||
const hasDialog = await confirmDialog.isVisible().catch(() => false);
|
||||
|
||||
if (hasDialog) {
|
||||
const confirmButton = page.getByRole('button', { name: /delete|confirm|yes/i });
|
||||
await confirmButton.click();
|
||||
}
|
||||
|
||||
// Verify success message
|
||||
|
||||
const successMessage = page.getByText(/deleted|success/i);
|
||||
// Verify success
|
||||
const successMessage = page.getByText(/terminated|stopped|success/i);
|
||||
const hasSuccess = await successMessage.isVisible().catch(() => false);
|
||||
expect(hasSuccess).toBe(true);
|
||||
}
|
||||
@@ -277,10 +201,23 @@ test.describe('[Loops] - Loop Management Tests', () => {
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.7 - should display loop status correctly', async ({ page }) => {
|
||||
test('L3.17 - View loop execution logs', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Navigate to loops page
|
||||
// Mock API for logs
|
||||
await page.route('**/api/loops/*/logs', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
logs: [
|
||||
{ timestamp: Date.now(), level: 'info', message: 'Loop started' },
|
||||
{ timestamp: Date.now(), level: 'info', message: 'Processing step 1' }
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for loop items
|
||||
@@ -290,51 +227,26 @@ test.describe('[Loops] - Loop Management Tests', () => {
|
||||
|
||||
const itemCount = await loopItems.count();
|
||||
|
||||
if (itemCount > 0) {
|
||||
// Check each loop has a status indicator
|
||||
for (let i = 0; i < Math.min(itemCount, 3); i++) {
|
||||
const loop = loopItems.nth(i);
|
||||
|
||||
// Look for status indicator
|
||||
const statusIndicator = loop.getByTestId('loop-status').or(
|
||||
loop.locator('*').filter({ hasText: /running|paused|stopped|completed|created/i })
|
||||
);
|
||||
|
||||
const hasStatus = await statusIndicator.isVisible().catch(() => false);
|
||||
expect(hasStatus).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.8 - should display loop progress', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Navigate to loops page
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for loop items with progress
|
||||
const loopItems = page.getByTestId(/loop-item|loop-card/).or(
|
||||
page.locator('.loop-item')
|
||||
);
|
||||
|
||||
const itemCount = await loopItems.count();
|
||||
|
||||
if (itemCount > 0) {
|
||||
const firstLoop = loopItems.first();
|
||||
|
||||
// Look for progress bar or step indicator
|
||||
const progressBar = firstLoop.getByTestId('loop-progress').or(
|
||||
firstLoop.locator('*').filter({ hasText: /\d+\/\d+|step/i })
|
||||
// Look for logs button/panel
|
||||
const logsButton = firstLoop.getByRole('button', { name: /logs|view logs/i }).or(
|
||||
firstLoop.getByTestId('view-logs-button')
|
||||
);
|
||||
|
||||
const hasProgress = await progressBar.isVisible().catch(() => false);
|
||||
const hasLogsButton = await logsButton.isVisible().catch(() => false);
|
||||
|
||||
// Progress is optional but if present should be visible
|
||||
if (hasProgress) {
|
||||
expect(progressBar).toBeVisible();
|
||||
if (hasLogsButton) {
|
||||
await logsButton.click();
|
||||
|
||||
// Look for logs panel
|
||||
const logsPanel = page.getByTestId('loop-logs-panel').or(
|
||||
page.getByRole('dialog').filter({ hasText: /logs/i })
|
||||
);
|
||||
|
||||
const hasLogsPanel = await logsPanel.isVisible().catch(() => false);
|
||||
expect(hasLogsPanel).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -342,80 +254,96 @@ test.describe('[Loops] - Loop Management Tests', () => {
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.9 - should handle loop creation errors gracefully', async ({ page }) => {
|
||||
test('L3.18 - i18n - Loop status in EN/ZH', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API failure
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Get language switcher
|
||||
const languageSwitcher = page.getByRole('combobox', { name: /select language|language/i }).first();
|
||||
|
||||
const hasLanguageSwitcher = await languageSwitcher.isVisible().catch(() => false);
|
||||
|
||||
if (hasLanguageSwitcher) {
|
||||
// Switch to Chinese
|
||||
await switchLanguageAndVerify(page, 'zh', languageSwitcher);
|
||||
|
||||
// Verify loop status in Chinese
|
||||
const statusText = page.getByText(/运行|停止|完成/i);
|
||||
const hasChineseStatus = await statusText.isVisible().catch(() => false);
|
||||
|
||||
// Chinese status may or may not be visible depending on active loops
|
||||
if (hasChineseStatus) {
|
||||
expect(hasChineseStatus).toBe(true);
|
||||
}
|
||||
|
||||
// Switch back to English
|
||||
await switchLanguageAndVerify(page, 'en', languageSwitcher);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.19 - Error - Failed loop displays error', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for failed loop
|
||||
await page.route('**/api/loops', (route) => {
|
||||
route.fulfill({
|
||||
status: 500,
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'Internal Server Error' }),
|
||||
body: JSON.stringify({
|
||||
loops: [
|
||||
{
|
||||
id: 'loop-failed',
|
||||
name: 'Failed Loop',
|
||||
status: 'failed',
|
||||
error: 'Connection timeout'
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Navigate to loops page
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for create button
|
||||
const createButton = page.getByRole('button', { name: /create|new|add/i });
|
||||
const hasCreateButton = await createButton.isVisible().catch(() => false);
|
||||
// Look for error indicator
|
||||
const errorIndicator = page.getByText(/failed|error|timeout/i).or(
|
||||
page.getByTestId('loop-error')
|
||||
);
|
||||
|
||||
if (hasCreateButton) {
|
||||
await createButton.click();
|
||||
const hasError = await errorIndicator.isVisible().catch(() => false);
|
||||
|
||||
// Try to create loop
|
||||
const promptInput = page.getByRole('textbox', { name: /prompt|description/i });
|
||||
const hasPromptInput = await promptInput.isVisible().catch(() => false);
|
||||
|
||||
if (hasPromptInput) {
|
||||
await promptInput.fill('Test prompt');
|
||||
|
||||
const submitButton = page.getByRole('button', { name: /create|save|submit/i });
|
||||
await submitButton.click();
|
||||
|
||||
// Look for error message
|
||||
|
||||
const errorMessage = page.getByText(/error|failed|unable/i);
|
||||
const hasError = await errorMessage.isVisible().catch(() => false);
|
||||
expect(hasError).toBe(true);
|
||||
}
|
||||
if (hasError) {
|
||||
expect(errorIndicator).toBeVisible();
|
||||
}
|
||||
|
||||
// Restore routing
|
||||
await page.unroute('**/api/loops');
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/loops'], allowWarnings: true });
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.10 - should support batch operations on loops', async ({ page }) => {
|
||||
test('L3.20 - Edge - No loops available', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Navigate to loops page
|
||||
// Mock API for empty loops
|
||||
await page.route('**/api/loops', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ loops: [] })
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto('/loops', { waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for batch operation controls
|
||||
const selectAllCheckbox = page.getByRole('checkbox', { name: /select all/i }).or(
|
||||
page.getByTestId('select-all-loops')
|
||||
// Look for empty state
|
||||
const emptyState = page.getByTestId('empty-state').or(
|
||||
page.getByText(/no loops|empty|get started/i)
|
||||
);
|
||||
|
||||
const hasSelectAll = await selectAllCheckbox.isVisible().catch(() => false);
|
||||
|
||||
if (hasSelectAll) {
|
||||
await selectAllCheckbox.check();
|
||||
|
||||
// Look for batch action buttons
|
||||
const batchStopButton = page.getByRole('button', { name: /stop selected|stop all/i }).or(
|
||||
page.getByTestId('batch-stop-button')
|
||||
);
|
||||
|
||||
const hasBatchStop = await batchStopButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasBatchStop) {
|
||||
expect(batchStopButton).toBeVisible();
|
||||
}
|
||||
}
|
||||
const hasEmptyState = await emptyState.isVisible().catch(() => false);
|
||||
expect(hasEmptyState).toBe(true);
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
|
||||
563
ccw/frontend/tests/e2e/orchestrator.spec.ts
Normal file
563
ccw/frontend/tests/e2e/orchestrator.spec.ts
Normal file
@@ -0,0 +1,563 @@
|
||||
// ========================================
|
||||
// E2E Tests: Orchestrator - Workflow Canvas
|
||||
// ========================================
|
||||
// End-to-end tests for workflow orchestration with @xyflow/react canvas
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupEnhancedMonitoring, switchLanguageAndVerify } from './helpers/i18n-helpers';
|
||||
|
||||
test.describe('[Orchestrator] - Workflow Canvas Tests', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/orchestrator', { waitUntil: 'networkidle' as const });
|
||||
});
|
||||
|
||||
test('L3.01 - Canvas loads and displays nodes', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API response for workflows
|
||||
await page.route('**/api/workflows', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
workflows: [
|
||||
{
|
||||
id: 'wf-1',
|
||||
name: 'Test Workflow',
|
||||
nodes: [
|
||||
{ id: 'node-1', type: 'start', position: { x: 100, y: 100 } },
|
||||
{ id: 'node-2', type: 'action', position: { x: 300, y: 100 } }
|
||||
],
|
||||
edges: [
|
||||
{ id: 'edge-1', source: 'node-1', target: 'node-2' }
|
||||
]
|
||||
}
|
||||
],
|
||||
total: 1,
|
||||
page: 1,
|
||||
limit: 10
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Reload page to trigger API call
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for workflow canvas
|
||||
const canvas = page.getByTestId('workflow-canvas').or(
|
||||
page.locator('.react-flow')
|
||||
);
|
||||
|
||||
const isCanvasVisible = await canvas.isVisible().catch(() => false);
|
||||
|
||||
if (isCanvasVisible) {
|
||||
// Verify nodes are displayed
|
||||
const nodes = page.locator('.react-flow-node').or(
|
||||
page.getByTestId(/node-/)
|
||||
);
|
||||
|
||||
const nodeCount = await nodes.count();
|
||||
expect(nodeCount).toBeGreaterThan(0);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.02 - Create new node via drag-drop', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for node creation
|
||||
await page.route('**/api/workflows', (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true, id: 'new-node-1' })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for node library or create button
|
||||
const nodeLibrary = page.getByTestId('node-library').or(
|
||||
page.getByTestId('node-create-button')
|
||||
);
|
||||
|
||||
const hasLibrary = await nodeLibrary.isVisible().catch(() => false);
|
||||
|
||||
if (hasLibrary) {
|
||||
// Find a draggable node type
|
||||
const nodeType = nodeLibrary.locator('[data-node-type]').first();
|
||||
const hasNodeType = await nodeType.isVisible().catch(() => false);
|
||||
|
||||
if (hasNodeType) {
|
||||
const canvas = page.getByTestId('workflow-canvas').or(
|
||||
page.locator('.react-flow')
|
||||
);
|
||||
|
||||
const canvasBox = await canvas.boundingBox();
|
||||
if (canvasBox) {
|
||||
// Simulate drag-drop
|
||||
await nodeType.dragTo(canvas, {
|
||||
targetPosition: { x: canvasBox.x + 200, y: canvasBox.y + 200 }
|
||||
});
|
||||
|
||||
// Wait for node to appear
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Verify new node exists
|
||||
const newNode = page.locator('.react-flow-node').or(
|
||||
page.getByTestId(/node-/)
|
||||
);
|
||||
|
||||
const nodeCount = await newNode.count();
|
||||
expect(nodeCount).toBeGreaterThan(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.03 - Connect nodes with edges', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for edge creation
|
||||
await page.route('**/api/workflows/*', (route) => {
|
||||
if (route.request().method() === 'PUT') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for existing nodes
|
||||
const nodes = page.locator('.react-flow-node').or(
|
||||
page.getByTestId(/node-/)
|
||||
);
|
||||
|
||||
const nodeCount = await nodes.count();
|
||||
|
||||
if (nodeCount >= 2) {
|
||||
const sourceNode = nodes.first();
|
||||
const targetNode = nodes.nth(1);
|
||||
|
||||
// Get node positions
|
||||
const sourceBox = await sourceNode.boundingBox();
|
||||
const targetBox = await targetNode.boundingBox();
|
||||
|
||||
if (sourceBox && targetBox) {
|
||||
// Click and drag from source to target to create edge
|
||||
await page.mouse.move(sourceBox.x + sourceBox.width, sourceBox.y + sourceBox.height / 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(targetBox.x, targetBox.y + targetBox.height / 2);
|
||||
await page.mouse.up();
|
||||
|
||||
// Wait for edge to be created
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
// Verify edge exists
|
||||
const edges = page.locator('.react-flow-edge').or(
|
||||
page.getByTestId(/edge-/)
|
||||
);
|
||||
|
||||
const edgeCount = await edges.count();
|
||||
expect(edgeCount).toBeGreaterThan(0);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.04 - Delete node and verify edge removal', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for node deletion
|
||||
await page.route('**/api/workflows/*', (route) => {
|
||||
if (route.request().method() === 'DELETE') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for nodes
|
||||
const nodes = page.locator('.react-flow-node').or(
|
||||
page.getByTestId(/node-/)
|
||||
);
|
||||
|
||||
const nodeCount = await nodes.count();
|
||||
|
||||
if (nodeCount > 0) {
|
||||
const firstNode = nodes.first();
|
||||
|
||||
// Get initial edge count
|
||||
const edgesBefore = await page.locator('.react-flow-edge').count();
|
||||
|
||||
// Select node and look for delete button
|
||||
await firstNode.click();
|
||||
|
||||
const deleteButton = page.getByRole('button', { name: /delete|remove/i }).or(
|
||||
page.getByTestId('node-delete-button')
|
||||
);
|
||||
|
||||
const hasDeleteButton = await deleteButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasDeleteButton) {
|
||||
await deleteButton.click();
|
||||
|
||||
// Wait for node to be removed
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
// Verify node count decreased
|
||||
const nodesAfter = await page.locator('.react-flow-node').count();
|
||||
expect(nodesAfter).toBeLessThan(nodeCount);
|
||||
|
||||
// Verify edges connected to deleted node are removed
|
||||
const edgesAfter = await page.locator('.react-flow-edge').count();
|
||||
expect(edgesAfter).toBeLessThanOrEqual(edgesBefore);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.05 - Zoom in/out functionality', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Look for zoom controls
|
||||
const zoomControls = page.getByTestId('zoom-controls').or(
|
||||
page.locator('.react-flow-controls')
|
||||
);
|
||||
|
||||
const hasZoomControls = await zoomControls.isVisible().catch(() => false);
|
||||
|
||||
if (hasZoomControls) {
|
||||
const zoomInButton = zoomControls.getByRole('button').first();
|
||||
const zoomOutButton = zoomControls.getByRole('button').nth(1);
|
||||
|
||||
// Get initial zoom level
|
||||
const initialZoom = await page.evaluate(() => {
|
||||
const container = document.querySelector('.react-flow');
|
||||
return container ? getComputedStyle(container).transform : 'none';
|
||||
});
|
||||
|
||||
// Click zoom in
|
||||
await zoomInButton.click();
|
||||
await page.waitForTimeout(200);
|
||||
|
||||
// Click zoom out
|
||||
await zoomOutButton.click();
|
||||
await page.waitForTimeout(200);
|
||||
|
||||
// Verify controls are still functional
|
||||
const isStillVisible = await zoomControls.isVisible();
|
||||
expect(isStillVisible).toBe(true);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.06 - Pan canvas functionality', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Look for canvas
|
||||
const canvas = page.getByTestId('workflow-canvas').or(
|
||||
page.locator('.react-flow')
|
||||
);
|
||||
|
||||
const isCanvasVisible = await canvas.isVisible().catch(() => false);
|
||||
|
||||
if (isCanvasVisible) {
|
||||
const canvasBox = await canvas.boundingBox();
|
||||
if (canvasBox) {
|
||||
// Simulate panning by clicking and dragging on canvas
|
||||
await page.mouse.move(canvasBox.x + 100, canvasBox.y + 100);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(canvasBox.x + 200, canvasBox.y + 150);
|
||||
await page.mouse.up();
|
||||
|
||||
// Wait for pan to complete
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
// Verify canvas is still visible after pan
|
||||
const isStillVisible = await canvas.isVisible();
|
||||
expect(isStillVisible).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.07 - Save workflow state', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for saving workflow
|
||||
await page.route('**/api/workflows/*', (route) => {
|
||||
if (route.request().method() === 'PUT') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true, saved: true })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for save button
|
||||
const saveButton = page.getByRole('button', { name: /save/i }).or(
|
||||
page.getByTestId('workflow-save-button')
|
||||
);
|
||||
|
||||
const hasSaveButton = await saveButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasSaveButton) {
|
||||
await saveButton.click();
|
||||
|
||||
// Look for success indicator
|
||||
const successMessage = page.getByText(/saved|success/i).or(
|
||||
page.getByTestId('save-success')
|
||||
);
|
||||
|
||||
const hasSuccess = await successMessage.isVisible().catch(() => false);
|
||||
expect(hasSuccess).toBe(true);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.08 - Load existing workflow', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for loading workflows
|
||||
await page.route('**/api/workflows', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
workflows: [
|
||||
{
|
||||
id: 'wf-existing',
|
||||
name: 'Existing Workflow',
|
||||
nodes: [
|
||||
{ id: 'node-1', type: 'start', position: { x: 100, y: 100 } }
|
||||
],
|
||||
edges: []
|
||||
}
|
||||
],
|
||||
total: 1,
|
||||
page: 1,
|
||||
limit: 10
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for workflow list selector
|
||||
const workflowSelector = page.getByRole('combobox', { name: /workflow|select/i }).or(
|
||||
page.getByTestId('workflow-selector')
|
||||
);
|
||||
|
||||
const hasSelector = await workflowSelector.isVisible().catch(() => false);
|
||||
|
||||
if (hasSelector) {
|
||||
const options = await workflowSelector.locator('option').count();
|
||||
if (options > 0) {
|
||||
await workflowSelector.selectOption({ index: 0 });
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Verify canvas has loaded content
|
||||
const canvas = page.getByTestId('workflow-canvas').or(
|
||||
page.locator('.react-flow')
|
||||
);
|
||||
|
||||
const isCanvasVisible = await canvas.isVisible();
|
||||
expect(isCanvasVisible).toBe(true);
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.09 - Export workflow configuration', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for export
|
||||
await page.route('**/api/workflows/*/export', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
id: 'wf-1',
|
||||
name: 'Exported Workflow',
|
||||
nodes: [],
|
||||
edges: []
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Look for export button
|
||||
const exportButton = page.getByRole('button', { name: /export/i }).or(
|
||||
page.getByTestId('workflow-export-button')
|
||||
);
|
||||
|
||||
const hasExportButton = await exportButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasExportButton) {
|
||||
await exportButton.click();
|
||||
|
||||
// Look for export dialog or download
|
||||
const exportDialog = page.getByRole('dialog').filter({ hasText: /export/i });
|
||||
const hasDialog = await exportDialog.isVisible().catch(() => false);
|
||||
|
||||
if (hasDialog) {
|
||||
const confirmButton = exportDialog.getByRole('button', { name: /export|download|save/i });
|
||||
await confirmButton.click();
|
||||
}
|
||||
|
||||
// Verify some indication of export
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.10 - i18n - Node labels in EN/ZH', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Get language switcher
|
||||
const languageSwitcher = page.getByRole('combobox', { name: /select language|language/i }).first();
|
||||
|
||||
const hasLanguageSwitcher = await languageSwitcher.isVisible().catch(() => false);
|
||||
|
||||
if (hasLanguageSwitcher) {
|
||||
// Switch to Chinese
|
||||
await switchLanguageAndVerify(page, 'zh', languageSwitcher);
|
||||
|
||||
// Verify canvas elements exist in Chinese context
|
||||
const canvas = page.getByTestId('workflow-canvas').or(
|
||||
page.locator('.react-flow')
|
||||
);
|
||||
|
||||
const isCanvasVisible = await canvas.isVisible().catch(() => false);
|
||||
expect(isCanvasVisible).toBe(true);
|
||||
|
||||
// Switch back to English
|
||||
await switchLanguageAndVerify(page, 'en', languageSwitcher);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.11 - Error - Node with invalid configuration', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API error response
|
||||
await page.route('**/api/workflows', (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
route.fulfill({
|
||||
status: 400,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'Invalid node configuration' })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Look for create button
|
||||
const createButton = page.getByRole('button', { name: /create|add node/i }).or(
|
||||
page.getByTestId('node-create-button')
|
||||
);
|
||||
|
||||
const hasCreateButton = await createButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasCreateButton) {
|
||||
await createButton.click();
|
||||
|
||||
// Try to create node without required fields (this should trigger error)
|
||||
const submitButton = page.getByRole('button', { name: /create|save|submit/i });
|
||||
const hasSubmit = await submitButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasSubmit) {
|
||||
await submitButton.click();
|
||||
|
||||
// Look for error message
|
||||
const errorMessage = page.getByText(/invalid|error|required/i).or(
|
||||
page.getByTestId('error-message')
|
||||
);
|
||||
|
||||
const hasError = await errorMessage.isVisible().catch(() => false);
|
||||
// Error message may or may not appear depending on validation
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/workflows'], allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.12 - Edge - Maximum nodes limit', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API to enforce limit
|
||||
await page.route('**/api/workflows', (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
route.fulfill({
|
||||
status: 409,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'Maximum node limit reached' })
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Try to create multiple nodes rapidly
|
||||
const createButton = page.getByRole('button', { name: /create|add/i }).or(
|
||||
page.getByTestId('node-create-button')
|
||||
);
|
||||
|
||||
const hasCreateButton = await createButton.isVisible().catch(() => false);
|
||||
|
||||
if (hasCreateButton) {
|
||||
// Attempt multiple creates
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await createButton.click();
|
||||
await page.waitForTimeout(100);
|
||||
}
|
||||
|
||||
// Look for limit error message
|
||||
const limitMessage = page.getByText(/limit|maximum|too many/i).or(
|
||||
page.getByTestId('limit-message')
|
||||
);
|
||||
|
||||
const hasLimitMessage = await limitMessage.isVisible().catch(() => false);
|
||||
// Limit message may or may not appear
|
||||
}
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/workflows'], allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
});
|
||||
192
ccw/frontend/tests/e2e/project.spec.ts
Normal file
192
ccw/frontend/tests/e2e/project.spec.ts
Normal file
@@ -0,0 +1,192 @@
|
||||
// ========================================
|
||||
// E2E Tests: Project - Development Timeline and Statistics
|
||||
// ========================================
|
||||
// End-to-end tests for project overview with statistics and timeline
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupEnhancedMonitoring, switchLanguageAndVerify } from './helpers/i18n-helpers';
|
||||
|
||||
test.describe('[Project] - Development Statistics Tests', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/project', { waitUntil: 'networkidle' as const });
|
||||
});
|
||||
|
||||
test('L3.39 - Page loads and displays project statistics', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for project stats
|
||||
await page.route('**/api/project', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
stats: {
|
||||
totalCommits: 150,
|
||||
totalFiles: 450,
|
||||
totalLines: 25000,
|
||||
languages: ['TypeScript', 'JavaScript', 'CSS'],
|
||||
contributors: 5
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for project stats
|
||||
const projectStats = page.getByTestId('project-stats').or(
|
||||
page.locator('.project-stats')
|
||||
);
|
||||
|
||||
const isStatsVisible = await projectStats.isVisible().catch(() => false);
|
||||
|
||||
if (isStatsVisible) {
|
||||
// Verify stat items are displayed
|
||||
const statItems = page.getByTestId(/stat-|stat-card/).or(
|
||||
page.locator('.stat-item')
|
||||
);
|
||||
|
||||
const statCount = await statItems.count();
|
||||
expect(statCount).toBeGreaterThan(0);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.40 - View development timeline', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Look for timeline section
|
||||
const timeline = page.getByTestId('timeline-chart').or(
|
||||
page.getByText(/timeline|activity|history/i)
|
||||
);
|
||||
|
||||
const hasTimeline = await timeline.isVisible().catch(() => false);
|
||||
|
||||
if (hasTimeline) {
|
||||
// Verify timeline has content
|
||||
const timelineContent = timeline.locator('*').filter({ hasText: /\d+|commit|activity/i });
|
||||
const hasContent = await timelineContent.isVisible().catch(() => false);
|
||||
|
||||
if (hasContent) {
|
||||
expect(timelineContent).toBeVisible();
|
||||
}
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.41 - View contribution graph', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Look for contribution graph
|
||||
const contributionGraph = page.getByTestId('contribution-graph').or(
|
||||
page.locator('.contribution-graph')
|
||||
);
|
||||
|
||||
const hasGraph = await contributionGraph.isVisible().catch(() => false);
|
||||
|
||||
if (hasGraph) {
|
||||
// Verify graph has visualization elements
|
||||
const graphElements = contributionGraph.locator('*').filter({ hasText: /\d+/ });
|
||||
const elementCount = await graphElements.count();
|
||||
expect(elementCount).toBeGreaterThan(0);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.42 - i18n - Project stats in EN/ZH', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Get language switcher
|
||||
const languageSwitcher = page.getByRole('combobox', { name: /select language|language/i }).first();
|
||||
|
||||
const hasLanguageSwitcher = await languageSwitcher.isVisible().catch(() => false);
|
||||
|
||||
if (hasLanguageSwitcher) {
|
||||
// Switch to Chinese
|
||||
await switchLanguageAndVerify(page, 'zh', languageSwitcher);
|
||||
|
||||
// Verify project stats are in Chinese
|
||||
const pageContent = await page.content();
|
||||
const hasChineseText = /[\u4e00-\u9fa5]/.test(pageContent);
|
||||
expect(hasChineseText).toBe(true);
|
||||
|
||||
// Switch back to English
|
||||
await switchLanguageAndVerify(page, 'en', languageSwitcher);
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.43 - Error - Failed to load project data', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API error
|
||||
await page.route('**/api/project', (route) => {
|
||||
route.fulfill({
|
||||
status: 500,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'Failed to load project data' })
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for error indicator
|
||||
const errorIndicator = page.getByText(/error|failed|unable to load/i).or(
|
||||
page.getByTestId('error-state')
|
||||
);
|
||||
|
||||
const hasError = await errorIndicator.isVisible().catch(() => false);
|
||||
|
||||
if (hasError) {
|
||||
expect(errorIndicator).toBeVisible();
|
||||
}
|
||||
|
||||
monitoring.assertClean({ ignoreAPIPatterns: ['/api/project'], allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
|
||||
test('L3.44 - Edge - No commits state', async ({ page }) => {
|
||||
const monitoring = setupEnhancedMonitoring(page);
|
||||
|
||||
// Mock API for no commits
|
||||
await page.route('**/api/project', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
stats: {
|
||||
totalCommits: 0,
|
||||
totalFiles: 0,
|
||||
totalLines: 0,
|
||||
languages: [],
|
||||
contributors: 0
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// Reload to trigger API
|
||||
await page.reload({ waitUntil: 'networkidle' as const });
|
||||
|
||||
// Look for empty state or zero stats
|
||||
const emptyState = page.getByText(/no commits|no activity|empty/i);
|
||||
const hasEmptyState = await emptyState.isVisible().catch(() => false);
|
||||
|
||||
if (hasEmptyState) {
|
||||
expect(emptyState).toBeVisible();
|
||||
}
|
||||
|
||||
monitoring.assertClean({ allowWarnings: true });
|
||||
monitoring.stop();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user