🎯 Test: Drag and Drop Status Reordering

📋 Test Overview

This test verifies that custom task statuses can be reordered using drag-and-drop functionality.

Feature: Task 14 - Frontend drag-and-drop reordering

Requirements: 4.1, 4.2, 4.3, 4.4, 4.5

🔧 Setup

✅ Test Cases

Test Case 1: Visual Elements

• Verify drag handle (grip icon) is visible on each custom status
• Verify drag handle has hover effect (color change)
• Verify cursor changes to "grab" when hovering over drag handle
• Verify system statuses do NOT have drag handles

Test Case 2: Basic Drag and Drop

• Create at least 3 custom statuses if not already present
• Click and hold the drag handle on the first status
• Verify cursor changes to "grabbing"
• Drag the status down to the third position
• Verify ghost element appears with opacity during drag
• Release the mouse button
• Verify status moves to new position
• Verify success toast notification appears

Test Case 3: Reorder Persistence

• Reorder statuses using drag and drop
• Wait for success notification
• Refresh the page
• Verify the new order persists after page reload

Test Case 4: Multiple Reorders

• Drag a status from position 1 to position 3
• Wait for success notification
• Drag another status from position 2 to position 1
• Wait for success notification
• Verify all statuses are in correct positions

Test Case 5: Disabled State During Reorder

• Start dragging a status
• Drop it in a new position
• During the API call, verify:
  • All status items have reduced opacity
  • Edit and delete buttons are disabled
  • Drag handles show "not-allowed" cursor
• After API completes, verify UI returns to normal state

Test Case 6: No Change Detection

• Click and drag a status
• Drop it back in its original position
• Verify no API call is made (check network tab)
• Verify no toast notification appears

Test Case 7: Error Handling

• Stop the backend server
• Try to reorder a status
• Verify error toast notification appears
• Verify statuses revert to original order
• Restart backend and verify functionality works again

Test Case 8: Animation and Transitions

• Drag a status and observe smooth animation (200ms)
• Verify other statuses smoothly move to make space
• Verify hover effects work on all interactive elements

Test Case 9: Default Status Reordering

• Set one status as default (star badge visible)
• Drag the default status to a different position
• Verify it can be reordered like other statuses
• Verify default badge remains visible after reorder

Test Case 10: Integration with Other Features

• Reorder statuses
• Edit a status (change name or color)
• Verify order is maintained after edit
• Create a new status
• Verify new status appears at the end of the list
• Verify new status can be dragged to any position

🔍 Backend Verification

📊 Expected Results

• Drag handles are visible and functional on all custom statuses
• Statuses can be reordered by dragging and dropping
• Order changes persist after page reload
• Success/error notifications appear appropriately
• UI is disabled during API calls to prevent conflicts
• Animations are smooth and responsive
• System statuses cannot be reordered
• Error states are handled gracefully

🐛 Known Issues / Notes

• Drag and drop requires mouse interaction (touch support may vary)
• The reorder API must be implemented on the backend
• Task counts are currently showing 0 (will be implemented later)

✨ Implementation Details

Library: vue-draggable-next

Component: CustomTaskStatusManager.vue

Key Features:

• Drag handle with GripVertical icon
• 200ms animation duration
• Ghost class for visual feedback during drag
• Disabled state during API calls
• Optimistic UI updates with error rollback
• Success/error toast notifications