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

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