255 lines
9.6 KiB
HTML
255 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test: Drag and Drop Status Reordering</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 20px 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;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 10px;
|
|
}
|
|
h2 {
|
|
color: #555;
|
|
margin-top: 0;
|
|
}
|
|
.test-step {
|
|
margin: 15px 0;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
.expected {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
.note {
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
margin-top: 5px;
|
|
}
|
|
code {
|
|
background-color: #e9ecef;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.checklist {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
.checklist li {
|
|
padding: 8px;
|
|
margin: 5px 0;
|
|
background-color: #fff;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
}
|
|
.checklist li:before {
|
|
content: "☐ ";
|
|
margin-right: 10px;
|
|
font-size: 1.2em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎯 Test: Drag and Drop Status Reordering</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>📋 Test Overview</h2>
|
|
<p>This test verifies that custom task statuses can be reordered using drag-and-drop functionality.</p>
|
|
<p><strong>Feature:</strong> Task 14 - Frontend drag-and-drop reordering</p>
|
|
<p><strong>Requirements:</strong> 4.1, 4.2, 4.3, 4.4, 4.5</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔧 Setup</h2>
|
|
<div class="test-step">
|
|
<strong>1. Start the backend server</strong>
|
|
<p class="note">From the <code>backend</code> directory:</p>
|
|
<code>uvicorn main:app --reload --host 0.0.0.0 --port 8000</code>
|
|
</div>
|
|
<div class="test-step">
|
|
<strong>2. Start the frontend development server</strong>
|
|
<p class="note">From the <code>frontend</code> directory:</p>
|
|
<code>npm run dev</code>
|
|
</div>
|
|
<div class="test-step">
|
|
<strong>3. Login as admin or coordinator</strong>
|
|
<p class="note">Navigate to: <code>http://localhost:5173</code></p>
|
|
<p>Use credentials with admin or coordinator role</p>
|
|
</div>
|
|
<div class="test-step">
|
|
<strong>4. Navigate to Project Settings</strong>
|
|
<p class="note">Go to a project → Settings → Tasks tab</p>
|
|
<p>Scroll to the "Custom Task Statuses" section</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Test Cases</h2>
|
|
|
|
<h3>Test Case 1: Visual Elements</h3>
|
|
<ul class="checklist">
|
|
<li>Verify drag handle (grip icon) is visible on each custom status</li>
|
|
<li>Verify drag handle has hover effect (color change)</li>
|
|
<li>Verify cursor changes to "grab" when hovering over drag handle</li>
|
|
<li>Verify system statuses do NOT have drag handles</li>
|
|
</ul>
|
|
|
|
<h3>Test Case 2: Basic Drag and Drop</h3>
|
|
<ul class="checklist">
|
|
<li>Create at least 3 custom statuses if not already present</li>
|
|
<li>Click and hold the drag handle on the first status</li>
|
|
<li>Verify cursor changes to "grabbing"</li>
|
|
<li>Drag the status down to the third position</li>
|
|
<li>Verify ghost element appears with opacity during drag</li>
|
|
<li>Release the mouse button</li>
|
|
<li>Verify status moves to new position</li>
|
|
<li>Verify success toast notification appears</li>
|
|
</ul>
|
|
|
|
<h3>Test Case 3: Reorder Persistence</h3>
|
|
<ul class="checklist">
|
|
<li>Reorder statuses using drag and drop</li>
|
|
<li>Wait for success notification</li>
|
|
<li>Refresh the page</li>
|
|
<li>Verify the new order persists after page reload</li>
|
|
</ul>
|
|
|
|
<h3>Test Case 4: Multiple Reorders</h3>
|
|
<ul class="checklist">
|
|
<li>Drag a status from position 1 to position 3</li>
|
|
<li>Wait for success notification</li>
|
|
<li>Drag another status from position 2 to position 1</li>
|
|
<li>Wait for success notification</li>
|
|
<li>Verify all statuses are in correct positions</li>
|
|
</ul>
|
|
|
|
<h3>Test Case 5: Disabled State During Reorder</h3>
|
|
<ul class="checklist">
|
|
<li>Start dragging a status</li>
|
|
<li>Drop it in a new position</li>
|
|
<li>During the API call, verify:
|
|
<ul>
|
|
<li>All status items have reduced opacity</li>
|
|
<li>Edit and delete buttons are disabled</li>
|
|
<li>Drag handles show "not-allowed" cursor</li>
|
|
</ul>
|
|
</li>
|
|
<li>After API completes, verify UI returns to normal state</li>
|
|
</ul>
|
|
|
|
<h3>Test Case 6: No Change Detection</h3>
|
|
<ul class="checklist">
|
|
<li>Click and drag a status</li>
|
|
<li>Drop it back in its original position</li>
|
|
<li>Verify no API call is made (check network tab)</li>
|
|
<li>Verify no toast notification appears</li>
|
|
</ul>
|
|
|
|
<h3>Test Case 7: Error Handling</h3>
|
|
<ul class="checklist">
|
|
<li>Stop the backend server</li>
|
|
<li>Try to reorder a status</li>
|
|
<li>Verify error toast notification appears</li>
|
|
<li>Verify statuses revert to original order</li>
|
|
<li>Restart backend and verify functionality works again</li>
|
|
</ul>
|
|
|
|
<h3>Test Case 8: Animation and Transitions</h3>
|
|
<ul class="checklist">
|
|
<li>Drag a status and observe smooth animation (200ms)</li>
|
|
<li>Verify other statuses smoothly move to make space</li>
|
|
<li>Verify hover effects work on all interactive elements</li>
|
|
</ul>
|
|
|
|
<h3>Test Case 9: Default Status Reordering</h3>
|
|
<ul class="checklist">
|
|
<li>Set one status as default (star badge visible)</li>
|
|
<li>Drag the default status to a different position</li>
|
|
<li>Verify it can be reordered like other statuses</li>
|
|
<li>Verify default badge remains visible after reorder</li>
|
|
</ul>
|
|
|
|
<h3>Test Case 10: Integration with Other Features</h3>
|
|
<ul class="checklist">
|
|
<li>Reorder statuses</li>
|
|
<li>Edit a status (change name or color)</li>
|
|
<li>Verify order is maintained after edit</li>
|
|
<li>Create a new status</li>
|
|
<li>Verify new status appears at the end of the list</li>
|
|
<li>Verify new status can be dragged to any position</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔍 Backend Verification</h2>
|
|
<div class="test-step">
|
|
<strong>Check API Endpoint</strong>
|
|
<p>Open browser DevTools → Network tab</p>
|
|
<p>When dragging and dropping, verify:</p>
|
|
<ul>
|
|
<li>Request: <code>PATCH /api/projects/{project_id}/task-statuses/reorder</code></li>
|
|
<li>Request body contains: <code>{"status_ids": ["id1", "id2", "id3", ...]}</code></li>
|
|
<li>Response status: <code>200 OK</code></li>
|
|
<li>Response contains updated statuses with new order values</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📊 Expected Results</h2>
|
|
<ul class="checklist">
|
|
<li>Drag handles are visible and functional on all custom statuses</li>
|
|
<li>Statuses can be reordered by dragging and dropping</li>
|
|
<li>Order changes persist after page reload</li>
|
|
<li>Success/error notifications appear appropriately</li>
|
|
<li>UI is disabled during API calls to prevent conflicts</li>
|
|
<li>Animations are smooth and responsive</li>
|
|
<li>System statuses cannot be reordered</li>
|
|
<li>Error states are handled gracefully</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🐛 Known Issues / Notes</h2>
|
|
<ul>
|
|
<li>Drag and drop requires mouse interaction (touch support may vary)</li>
|
|
<li>The reorder API must be implemented on the backend</li>
|
|
<li>Task counts are currently showing 0 (will be implemented later)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✨ Implementation Details</h2>
|
|
<p><strong>Library:</strong> vue-draggable-next</p>
|
|
<p><strong>Component:</strong> CustomTaskStatusManager.vue</p>
|
|
<p><strong>Key Features:</strong></p>
|
|
<ul>
|
|
<li>Drag handle with GripVertical icon</li>
|
|
<li>200ms animation duration</li>
|
|
<li>Ghost class for visual feedback during drag</li>
|
|
<li>Disabled state during API calls</li>
|
|
<li>Optimistic UI updates with error rollback</li>
|
|
<li>Success/error toast notifications</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|