285 lines
12 KiB
HTML
285 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Custom Task Status Manager Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.test-section {
|
|
background: white;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
}
|
|
h2 {
|
|
color: #666;
|
|
border-bottom: 2px solid #e0e0e0;
|
|
padding-bottom: 10px;
|
|
}
|
|
.test-step {
|
|
margin: 15px 0;
|
|
padding: 10px;
|
|
background-color: #f9f9f9;
|
|
border-left: 4px solid #4CAF50;
|
|
}
|
|
.test-step h3 {
|
|
margin-top: 0;
|
|
color: #4CAF50;
|
|
}
|
|
.expected {
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
code {
|
|
background-color: #f4f4f4;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.note {
|
|
background-color: #fff3cd;
|
|
border-left: 4px solid #ffc107;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
.success {
|
|
background-color: #d4edda;
|
|
border-left: 4px solid #28a745;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎨 Custom Task Status Manager Component Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Test Overview</h2>
|
|
<p>This test verifies the CustomTaskStatusManager component displays correctly in the Project Settings page.</p>
|
|
<p><strong>Component:</strong> <code>frontend/src/components/settings/CustomTaskStatusManager.vue</code></p>
|
|
<p><strong>Requirements:</strong> 1.1, 8.1, 8.2, 8.3</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Prerequisites</h2>
|
|
<div class="test-step">
|
|
<h3>1. Backend Server Running</h3>
|
|
<p>Ensure the backend server is running on <code>http://localhost:8000</code></p>
|
|
<code>cd backend && uvicorn main:app --reload</code>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>2. Frontend Server Running</h3>
|
|
<p>Ensure the frontend development server is running on <code>http://localhost:5173</code></p>
|
|
<code>cd frontend && npm run dev</code>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>3. User Authentication</h3>
|
|
<p>You must be logged in as a coordinator or admin user</p>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>4. Test Project</h3>
|
|
<p>You need at least one project in the system to test with</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test Steps</h2>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 1: Navigate to Project Settings</h3>
|
|
<p>1. Go to <code>http://localhost:5173</code></p>
|
|
<p>2. Click on a project from the projects list</p>
|
|
<p>3. Click on the "Settings" or gear icon to access project settings</p>
|
|
<p class="expected"><strong>Expected:</strong> You should see the Project Settings page with multiple tabs</p>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 2: Navigate to Tasks Tab</h3>
|
|
<p>1. Click on the "Tasks" tab in the Project Settings page</p>
|
|
<p class="expected"><strong>Expected:</strong> You should see the Tasks tab content with three sections:</p>
|
|
<ul>
|
|
<li>Custom Task Statuses (NEW - at the top)</li>
|
|
<li>Custom Task Types</li>
|
|
<li>Default Task Templates Editor</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 3: Verify Custom Task Status Manager Display</h3>
|
|
<p>Check that the Custom Task Status Manager section displays:</p>
|
|
<ul>
|
|
<li>✅ Section header: "Custom Task Statuses"</li>
|
|
<li>✅ Description text about defining custom statuses</li>
|
|
<li>✅ System Statuses section with shield icon</li>
|
|
<li>✅ List of system statuses (not_started, in_progress, submitted, approved, retake)</li>
|
|
<li>✅ Each system status shows:
|
|
<ul>
|
|
<li>Color indicator (colored circle)</li>
|
|
<li>Status name (formatted with spaces)</li>
|
|
<li>"System" badge</li>
|
|
<li>Task count (currently showing "0 tasks")</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 4: Verify Custom Statuses Section</h3>
|
|
<p>Check the Custom Statuses section:</p>
|
|
<ul>
|
|
<li>✅ Section header: "Custom Statuses" with palette icon</li>
|
|
<li>✅ "Add Status" button on the right</li>
|
|
<li>✅ If no custom statuses exist: Shows empty state message</li>
|
|
<li>✅ If custom statuses exist: Shows list with:
|
|
<ul>
|
|
<li>Color indicator</li>
|
|
<li>Status name</li>
|
|
<li>"Default" badge with star icon (if default)</li>
|
|
<li>"Custom" badge (if not default)</li>
|
|
<li>Task count</li>
|
|
<li>Edit button (pencil icon)</li>
|
|
<li>Delete button (trash icon)</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 5: Test Loading States</h3>
|
|
<p>1. Refresh the page while on the Tasks tab</p>
|
|
<p class="expected"><strong>Expected:</strong> You should see a loading spinner while data is being fetched</p>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Step 6: Test Button Interactions (Placeholder)</h3>
|
|
<p>1. Click the "Add Status" button</p>
|
|
<p class="expected"><strong>Expected:</strong> Toast notification saying "Coming Soon - Add status dialog will be implemented in the next task"</p>
|
|
<p>2. If custom statuses exist, click the Edit button on a status</p>
|
|
<p class="expected"><strong>Expected:</strong> Toast notification saying "Coming Soon - Edit status dialog will be implemented in the next task"</p>
|
|
<p>3. If custom statuses exist, click the Delete button on a status</p>
|
|
<p class="expected"><strong>Expected:</strong> Toast notification saying "Coming Soon - Delete status dialog will be implemented in the next task"</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Visual Verification Checklist</h2>
|
|
<ul>
|
|
<li>☐ Component renders without errors</li>
|
|
<li>☐ System statuses section displays correctly</li>
|
|
<li>☐ All 5 system statuses are shown (not_started, in_progress, submitted, approved, retake)</li>
|
|
<li>☐ Each status has a colored circle indicator</li>
|
|
<li>☐ Status names are properly formatted (underscores replaced with spaces)</li>
|
|
<li>☐ "System" badges are visible on system statuses</li>
|
|
<li>☐ Task counts are displayed (showing "0 tasks" for now)</li>
|
|
<li>☐ Custom statuses section displays correctly</li>
|
|
<li>☐ "Add Status" button is visible and clickable</li>
|
|
<li>☐ Empty state message shows when no custom statuses exist</li>
|
|
<li>☐ Loading state works (spinner shows during data fetch)</li>
|
|
<li>☐ No console errors in browser developer tools</li>
|
|
<li>☐ Component styling matches the rest of the application</li>
|
|
<li>☐ Hover effects work on custom status rows</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Known Limitations (To Be Implemented)</h2>
|
|
<div class="note">
|
|
<p><strong>Note:</strong> The following features are placeholders and will be implemented in subsequent tasks:</p>
|
|
<ul>
|
|
<li>Add Status dialog (Task 12)</li>
|
|
<li>Edit Status dialog (Task 12)</li>
|
|
<li>Delete Status confirmation (Task 13)</li>
|
|
<li>Drag-and-drop reordering (Task 14)</li>
|
|
<li>Set as Default functionality (Task 15)</li>
|
|
<li>Actual task count fetching from API (requires backend enhancement)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>API Endpoints Used</h2>
|
|
<ul>
|
|
<li><code>GET /projects/{project_id}/task-statuses</code> - Fetch all task statuses</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Troubleshooting</h2>
|
|
|
|
<div class="test-step">
|
|
<h3>Component Not Visible</h3>
|
|
<p>If the component doesn't appear:</p>
|
|
<ul>
|
|
<li>Check browser console for errors</li>
|
|
<li>Verify you're on the "Tasks" tab in Project Settings</li>
|
|
<li>Ensure you have proper permissions (coordinator or admin)</li>
|
|
<li>Check that the backend API is responding correctly</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Loading State Never Completes</h3>
|
|
<p>If the loading spinner never disappears:</p>
|
|
<ul>
|
|
<li>Check browser console for API errors</li>
|
|
<li>Verify backend server is running</li>
|
|
<li>Check network tab for failed requests</li>
|
|
<li>Ensure project ID is valid</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>System Statuses Not Showing</h3>
|
|
<p>If system statuses don't appear:</p>
|
|
<ul>
|
|
<li>Check the API response in network tab</li>
|
|
<li>Verify the backend is returning system_statuses array</li>
|
|
<li>Check browser console for data parsing errors</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Success Criteria</h2>
|
|
<div class="success">
|
|
<p><strong>✅ Task 11 is complete when:</strong></p>
|
|
<ul>
|
|
<li>CustomTaskStatusManager component renders without errors</li>
|
|
<li>System statuses section displays all 5 system statuses correctly</li>
|
|
<li>Custom statuses section displays with "Add Status" button</li>
|
|
<li>Visual indicators (colors, badges) display correctly</li>
|
|
<li>Task counts are shown for each status (even if 0)</li>
|
|
<li>Loading and error states work properly</li>
|
|
<li>Component is properly integrated into Project Settings Tasks tab</li>
|
|
<li>No TypeScript or console errors</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Next Steps</h2>
|
|
<p>After verifying this component works correctly, the following tasks will add functionality:</p>
|
|
<ul>
|
|
<li><strong>Task 12:</strong> Implement Add/Edit status dialog</li>
|
|
<li><strong>Task 13:</strong> Implement status deletion with confirmation</li>
|
|
<li><strong>Task 14:</strong> Implement drag-and-drop reordering</li>
|
|
<li><strong>Task 15:</strong> Implement default status management</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|