502 lines
22 KiB
HTML
502 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Task Selection Behavior Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.test-section {
|
|
background: white;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.test-case {
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
border-left: 4px solid #3b82f6;
|
|
background: #f8fafc;
|
|
}
|
|
.test-case.pass {
|
|
border-left-color: #10b981;
|
|
}
|
|
.test-case.fail {
|
|
border-left-color: #ef4444;
|
|
}
|
|
h1 {
|
|
color: #1e293b;
|
|
}
|
|
h2 {
|
|
color: #334155;
|
|
margin-top: 0;
|
|
}
|
|
h3 {
|
|
color: #475569;
|
|
margin-top: 0;
|
|
}
|
|
.status {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
margin-left: 10px;
|
|
}
|
|
.status.pending {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
.status.pass {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
.status.fail {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
.instructions {
|
|
background: #eff6ff;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
margin: 15px 0;
|
|
}
|
|
.expected {
|
|
color: #059669;
|
|
font-weight: 500;
|
|
}
|
|
.actual {
|
|
color: #dc2626;
|
|
font-weight: 500;
|
|
}
|
|
code {
|
|
background: #e2e8f0;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.checkbox {
|
|
margin-right: 8px;
|
|
}
|
|
.summary {
|
|
background: #1e293b;
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.summary-stats {
|
|
display: flex;
|
|
gap: 30px;
|
|
margin-top: 15px;
|
|
}
|
|
.stat {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
.stat-label {
|
|
font-size: 14px;
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 Task Selection Behavior Test Suite</h1>
|
|
<p><strong>Spec:</strong> task-browser-refactor</p>
|
|
<p><strong>Task:</strong> 15. Test selection behavior</p>
|
|
<p><strong>Requirements:</strong> 3.1, 3.2, 3.3, 3.4, 3.5</p>
|
|
|
|
<div class="summary">
|
|
<h2 style="margin-top: 0; color: white;">Test Summary</h2>
|
|
<div class="summary-stats">
|
|
<div>
|
|
<div class="stat" id="total-tests">0</div>
|
|
<div class="stat-label">Total Tests</div>
|
|
</div>
|
|
<div>
|
|
<div class="stat" style="color: #10b981;" id="passed-tests">0</div>
|
|
<div class="stat-label">Passed</div>
|
|
</div>
|
|
<div>
|
|
<div class="stat" style="color: #ef4444;" id="failed-tests">0</div>
|
|
<div class="stat-label">Failed</div>
|
|
</div>
|
|
<div>
|
|
<div class="stat" style="color: #f59e0b;" id="pending-tests">5</div>
|
|
<div class="stat-label">Pending</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 1: Single-Click Selection -->
|
|
<div class="test-section">
|
|
<h2>Test 1: Single-Click Selection (Requirement 3.1)</h2>
|
|
<p><strong>Requirement:</strong> WHEN a user clicks a row without modifiers THEN the system SHALL clear all selections and select only the clicked row</p>
|
|
|
|
<div class="instructions">
|
|
<h3>Test Instructions:</h3>
|
|
<ol>
|
|
<li>Navigate to a project's Tasks view with multiple tasks</li>
|
|
<li>Click on Task A (first task)</li>
|
|
<li>Verify only Task A is selected (highlighted)</li>
|
|
<li>Click on Task B (different task)</li>
|
|
<li>Verify only Task B is selected, Task A is deselected</li>
|
|
<li>Check selection count shows "1 task selected"</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 1.1: Initial Single Selection</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Clicking a task selects only that task</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="1.1"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 1.2: Selection Replacement</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Clicking another task clears previous selection and selects new task</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="1.2"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 1.3: Selection Count Display</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Selection count shows "1 task selected"</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="1.3"> Pass</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 2: Ctrl+Click Toggle Selection -->
|
|
<div class="test-section">
|
|
<h2>Test 2: Ctrl+Click Toggle Selection (Requirement 3.2)</h2>
|
|
<p><strong>Requirement:</strong> 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</p>
|
|
|
|
<div class="instructions">
|
|
<h3>Test Instructions:</h3>
|
|
<ol>
|
|
<li>Click Task A to select it</li>
|
|
<li>Hold Ctrl (or Cmd on Mac) and click Task B</li>
|
|
<li>Verify both Task A and Task B are selected</li>
|
|
<li>Hold Ctrl and click Task A again</li>
|
|
<li>Verify Task A is deselected, Task B remains selected</li>
|
|
<li>Hold Ctrl and click Task C</li>
|
|
<li>Verify Task B and Task C are selected</li>
|
|
<li>Check selection count shows correct number</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 2.1: Add to Selection</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Ctrl+clicking unselected task adds it to selection</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="2.1"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 2.2: Remove from Selection</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Ctrl+clicking selected task removes it from selection</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="2.2"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 2.3: Preserve Other Selections</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Ctrl+clicking does not affect other selected tasks</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="2.3"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 2.4: Multiple Selection Count</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Selection count shows "N tasks selected" for multiple selections</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="2.4"> Pass</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 3: Shift+Click Range Selection -->
|
|
<div class="test-section">
|
|
<h2>Test 3: Shift+Click Range Selection (Requirement 3.3)</h2>
|
|
<p><strong>Requirement:</strong> WHEN a user Shift+clicks a row THEN the system SHALL select all rows between the last clicked row and the current row</p>
|
|
|
|
<div class="instructions">
|
|
<h3>Test Instructions:</h3>
|
|
<ol>
|
|
<li>Click Task 1 (first task in list)</li>
|
|
<li>Hold Shift and click Task 5 (fifth task)</li>
|
|
<li>Verify Tasks 1, 2, 3, 4, and 5 are all selected</li>
|
|
<li>Click Task 3 (without modifiers) to reset</li>
|
|
<li>Hold Shift and click Task 7</li>
|
|
<li>Verify Tasks 3, 4, 5, 6, and 7 are selected</li>
|
|
<li>Hold Shift and click Task 1</li>
|
|
<li>Verify Tasks 1, 2, and 3 are selected (range works backwards)</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 3.1: Forward Range Selection</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Shift+clicking selects all tasks from first to last clicked</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="3.1"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 3.2: Backward Range Selection</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Shift+clicking earlier task selects range backwards</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="3.2"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 3.3: Range Selection Count</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Selection count shows correct number of tasks in range</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="3.3"> Pass</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 4: Select-All Checkbox -->
|
|
<div class="test-section">
|
|
<h2>Test 4: Select-All Checkbox (Requirement 3.4)</h2>
|
|
<p><strong>Requirement:</strong> WHEN a user clicks the header checkbox THEN the system SHALL toggle selection of all visible (filtered) rows</p>
|
|
|
|
<div class="instructions">
|
|
<h3>Test Instructions:</h3>
|
|
<ol>
|
|
<li>Ensure no filters are applied (all tasks visible)</li>
|
|
<li>Click the checkbox in the table header (leftmost column)</li>
|
|
<li>Verify all visible tasks are selected</li>
|
|
<li>Check selection count shows total number of tasks</li>
|
|
<li>Click the header checkbox again</li>
|
|
<li>Verify all tasks are deselected</li>
|
|
<li>Apply a filter (e.g., status filter to show only "In Progress")</li>
|
|
<li>Click the header checkbox</li>
|
|
<li>Verify only filtered tasks are selected</li>
|
|
<li>Remove filter and verify selection persists for previously selected tasks</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 4.1: Select All Visible Tasks</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Clicking header checkbox selects all visible tasks</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="4.1"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 4.2: Deselect All Tasks</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Clicking header checkbox again deselects all tasks</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="4.2"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 4.3: Select All Filtered Tasks</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">With filters applied, header checkbox selects only visible filtered tasks</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="4.3"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 4.4: Indeterminate State</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">When some (but not all) tasks are selected, checkbox shows indeterminate state</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="4.4"> Pass</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 5: Double-Click Behavior -->
|
|
<div class="test-section">
|
|
<h2>Test 5: Double-Click Opens Detail Panel (Requirement 3.5)</h2>
|
|
<p><strong>Requirement:</strong> WHEN a user double-clicks a row THEN the system SHALL open the task detail panel without modifying selection state</p>
|
|
|
|
<div class="instructions">
|
|
<h3>Test Instructions:</h3>
|
|
<ol>
|
|
<li>Select Task A and Task B (using Ctrl+click)</li>
|
|
<li>Double-click Task A</li>
|
|
<li>Verify Task detail panel opens for Task A</li>
|
|
<li>Verify both Task A and Task B remain selected</li>
|
|
<li>Close the detail panel</li>
|
|
<li>Double-click Task C (unselected task)</li>
|
|
<li>Verify Task detail panel opens for Task C</li>
|
|
<li>Verify Task A and Task B remain selected (selection unchanged)</li>
|
|
<li>On mobile/tablet, verify detail panel opens in a sheet/modal</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 5.1: Detail Panel Opens</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Double-clicking a task opens the detail panel</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="5.1"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 5.2: Selection Preserved on Selected Task</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Double-clicking a selected task does not change selection</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="5.2"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 5.3: Selection Preserved on Unselected Task</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Double-clicking an unselected task does not change existing selection</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="5.3"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 5.4: Detail Panel Content</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Detail panel shows correct task information</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="5.4"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 5.5: Mobile Detail Panel</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">On mobile, detail panel opens in sheet/modal format</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="5.5"> Pass</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Integration Tests -->
|
|
<div class="test-section">
|
|
<h2>Additional Integration Tests</h2>
|
|
<p>These tests verify the selection behavior works correctly in combination with other features.</p>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 6.1: Visual Feedback</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Selected rows have distinct background color (bg-muted/50)</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="6.1"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 6.2: Hover State</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Hovering over rows shows hover effect distinct from selection</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="6.2"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 6.3: Cursor Pointer</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">Cursor changes to pointer when hovering over rows</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="6.3"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 6.4: Text Selection Prevention</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">During shift-click, text is not selected (select-none class)</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="6.4"> Pass</label>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>Test Case 6.5: Empty Table</h3>
|
|
<p><strong>Expected:</strong> <span class="expected">When no tasks exist, table shows "No tasks found" message</span></p>
|
|
<label><input type="checkbox" class="checkbox test-checkbox" data-test="6.5"> Pass</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Execution Notes -->
|
|
<div class="test-section">
|
|
<h2>📝 Test Execution Notes</h2>
|
|
<p>Use this section to record any issues, observations, or notes during testing.</p>
|
|
<textarea id="test-notes" style="width: 100%; min-height: 150px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-family: inherit;" placeholder="Enter your test notes here..."></textarea>
|
|
</div>
|
|
|
|
<script>
|
|
// Update test summary when checkboxes are clicked
|
|
function updateSummary() {
|
|
const checkboxes = document.querySelectorAll('.test-checkbox');
|
|
const total = checkboxes.length;
|
|
const passed = document.querySelectorAll('.test-checkbox:checked').length;
|
|
const failed = 0; // Manual test, no automatic failure detection
|
|
const pending = total - passed;
|
|
|
|
document.getElementById('total-tests').textContent = total;
|
|
document.getElementById('passed-tests').textContent = passed;
|
|
document.getElementById('failed-tests').textContent = failed;
|
|
document.getElementById('pending-tests').textContent = pending;
|
|
|
|
// Update test case styling
|
|
checkboxes.forEach(checkbox => {
|
|
const testCase = checkbox.closest('.test-case');
|
|
if (checkbox.checked) {
|
|
testCase.classList.add('pass');
|
|
testCase.classList.remove('fail');
|
|
} else {
|
|
testCase.classList.remove('pass');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add event listeners to all checkboxes
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const checkboxes = document.querySelectorAll('.test-checkbox');
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.addEventListener('change', updateSummary);
|
|
});
|
|
updateSummary();
|
|
});
|
|
|
|
// Save test results to localStorage
|
|
function saveResults() {
|
|
const checkboxes = document.querySelectorAll('.test-checkbox');
|
|
const results = {};
|
|
checkboxes.forEach(checkbox => {
|
|
results[checkbox.dataset.test] = checkbox.checked;
|
|
});
|
|
localStorage.setItem('taskSelectionTestResults', JSON.stringify(results));
|
|
const notes = document.getElementById('test-notes').value;
|
|
localStorage.setItem('taskSelectionTestNotes', notes);
|
|
alert('Test results saved!');
|
|
}
|
|
|
|
// Load test results from localStorage
|
|
function loadResults() {
|
|
const saved = localStorage.getItem('taskSelectionTestResults');
|
|
if (saved) {
|
|
const results = JSON.parse(saved);
|
|
Object.keys(results).forEach(testId => {
|
|
const checkbox = document.querySelector(`[data-test="${testId}"]`);
|
|
if (checkbox) {
|
|
checkbox.checked = results[testId];
|
|
}
|
|
});
|
|
updateSummary();
|
|
}
|
|
const notes = localStorage.getItem('taskSelectionTestNotes');
|
|
if (notes) {
|
|
document.getElementById('test-notes').value = notes;
|
|
}
|
|
}
|
|
|
|
// Clear all results
|
|
function clearResults() {
|
|
if (confirm('Are you sure you want to clear all test results?')) {
|
|
localStorage.removeItem('taskSelectionTestResults');
|
|
localStorage.removeItem('taskSelectionTestNotes');
|
|
document.querySelectorAll('.test-checkbox').forEach(cb => cb.checked = false);
|
|
document.getElementById('test-notes').value = '';
|
|
updateSummary();
|
|
}
|
|
}
|
|
|
|
// Load results on page load
|
|
window.addEventListener('DOMContentLoaded', loadResults);
|
|
</script>
|
|
|
|
<div class="test-section" style="text-align: center;">
|
|
<button onclick="saveResults()" style="padding: 10px 20px; margin: 5px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">
|
|
💾 Save Results
|
|
</button>
|
|
<button onclick="loadResults()" style="padding: 10px 20px; margin: 5px; background: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">
|
|
📂 Load Results
|
|
</button>
|
|
<button onclick="clearResults()" style="padding: 10px 20px; margin: 5px; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">
|
|
🗑️ Clear Results
|
|
</button>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Test Completion Checklist</h2>
|
|
<p>Before marking this task as complete, ensure:</p>
|
|
<ul>
|
|
<li>All test cases have been executed</li>
|
|
<li>All requirements (3.1, 3.2, 3.3, 3.4, 3.5) are validated</li>
|
|
<li>Any failures are documented in the notes section</li>
|
|
<li>Test results are saved for future reference</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|