Init Repo

frontend/docs/task-selection-behavior-test-guide.md

@@ -0,0 +1,178 @@
+# Task Selection Behavior Test Guide
+
+**Spec:** task-browser-refactor  
+**Task:** 15. Test selection behavior  
+**Requirements:** 3.1, 3.2, 3.3, 3.4, 3.5
+
+## Overview
+
+This document provides a comprehensive guide for testing the selection behavior of the TasksDataTable component. The tests validate that the component correctly implements all selection requirements.
+
+## Test Execution
+
+Open `frontend/test-task-selection-behavior.html` in a browser to access the interactive test suite.
+
+## Test Scenarios
+
+### 1. Single-Click Selection (Requirement 3.1)
+
+**Requirement:** WHEN a user clicks a row without modifiers THEN the system SHALL clear all selections and select only the clicked row
+
+**Test Cases:**
+- 1.1: Initial single selection
+- 1.2: Selection replacement
+- 1.3: Selection count display
+
+**Steps:**
+1. Navigate to a project's Tasks view
+2. Click on Task A
+3. Verify only Task A is selected
+4. Click on Task B
+5. Verify only Task B is selected, Task A is deselected
+6. Check selection count shows "1 task selected"
+
+### 2. Ctrl+Click Toggle Selection (Requirement 3.2)
+
+**Requirement:** WHEN a user Ctrl+clicks (or Cmd+clicks on Mac) a row THEN the system SHALL toggle that row's selection state without affecting other selections
+
+**Test Cases:**
+- 2.1: Add to selection
+- 2.2: Remove from selection
+- 2.3: Preserve other selections
+- 2.4: Multiple selection count
+
+**Steps:**
+1. Click Task A to select it
+2. Hold Ctrl (or Cmd) and click Task B
+3. Verify both are selected
+4. Hold Ctrl and click Task A again
+5. Verify Task A is deselected, Task B remains selected
+6. Hold Ctrl and click Task C
+7. Verify Task B and Task C are selected
+
+
+### 3. Shift+Click Range Selection (Requirement 3.3)
+
+**Requirement:** WHEN a user Shift+clicks a row THEN the system SHALL select all rows between the last clicked row and the current row
+
+**Test Cases:**
+- 3.1: Forward range selection
+- 3.2: Backward range selection
+- 3.3: Range selection count
+
+**Steps:**
+1. Click Task 1
+2. Hold Shift and click Task 5
+3. Verify Tasks 1-5 are all selected
+4. Click Task 3 (without modifiers)
+5. Hold Shift and click Task 7
+6. Verify Tasks 3-7 are selected
+7. Hold Shift and click Task 1
+8. Verify Tasks 1-3 are selected (backwards range)
+
+### 4. Select-All Checkbox (Requirement 3.4)
+
+**Requirement:** WHEN a user clicks the header checkbox THEN the system SHALL toggle selection of all visible (filtered) rows
+
+**Test Cases:**
+- 4.1: Select all visible tasks
+- 4.2: Deselect all tasks
+- 4.3: Select all filtered tasks
+- 4.4: Indeterminate state
+
+**Steps:**
+1. Ensure no filters are applied
+2. Click the checkbox in the table header
+3. Verify all visible tasks are selected
+4. Click the header checkbox again
+5. Verify all tasks are deselected
+6. Apply a filter (e.g., status = "In Progress")
+7. Click the header checkbox
+8. Verify only filtered tasks are selected
+9. Select some (but not all) tasks manually
+10. Verify header checkbox shows indeterminate state
+
+### 5. Double-Click Opens Detail Panel (Requirement 3.5)
+
+**Requirement:** WHEN a user double-clicks a row THEN the system SHALL open the task detail panel without modifying selection state
+
+**Test Cases:**
+- 5.1: Detail panel opens
+- 5.2: Selection preserved on selected task
+- 5.3: Selection preserved on unselected task
+- 5.4: Detail panel content
+- 5.5: Mobile detail panel
+
+**Steps:**
+1. Select Task A and Task B (using Ctrl+click)
+2. Double-click Task A
+3. Verify detail panel opens for Task A
+4. Verify both Task A and Task B remain selected
+5. Close the detail panel
+6. Double-click Task C (unselected)
+7. Verify detail panel opens for Task C
+8. Verify Task A and Task B remain selected
+9. Test on mobile/tablet to verify sheet/modal behavior
+
+
+## Additional Integration Tests
+
+### Visual Feedback Tests
+- 6.1: Selected rows have distinct background color
+- 6.2: Hover state is distinct from selection
+- 6.3: Cursor changes to pointer on hover
+- 6.4: Text selection is prevented during shift-click
+- 6.5: Empty table shows "No tasks found" message
+
+## Test Environment Setup
+
+### Prerequisites
+1. Backend server running on http://localhost:8000
+2. Frontend dev server running on http://localhost:5173
+3. Test project with at least 10 tasks
+4. Multiple task types and statuses for filter testing
+
+### Test Data Requirements
+- At least 10 tasks in a project
+- Tasks with different statuses (Not Started, In Progress, Complete)
+- Tasks with different types
+- Tasks assigned to different users
+- Tasks in different episodes (if applicable)
+
+## Expected Behavior Summary
+
+| Action | Expected Result |
+|--------|----------------|
+| Click task | Select only that task, clear others |
+| Ctrl+Click task | Toggle task selection, preserve others |
+| Shift+Click task | Select range from last clicked to current |
+| Click header checkbox | Toggle all visible tasks |
+| Double-click task | Open detail panel, preserve selection |
+| Right-click selected | Preserve selection, show context menu |
+| Right-click unselected | Add to selection, show context menu |
+
+## Common Issues to Watch For
+
+1. **Selection not clearing on single click** - Verify no modifiers are pressed
+2. **Shift-click not working** - Check lastClickedIndex is being tracked
+3. **Select-all not respecting filters** - Verify only filtered tasks are selected
+4. **Double-click changing selection** - Check event.detail === 2 logic
+5. **Visual feedback missing** - Verify CSS classes are applied correctly
+
+## Test Result Recording
+
+Use the interactive test HTML file to:
+- Check off completed test cases
+- Record pass/fail status
+- Add notes about any issues
+- Save results to localStorage
+- Generate a test report
+
+## Completion Criteria
+
+Task 15 is complete when:
+- ✅ All 25+ test cases pass
+- ✅ All requirements (3.1-3.5) are validated
+- ✅ No regressions in existing functionality
+- ✅ Visual feedback is correct
+- ✅ Test results are documented