# 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