<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-Refresh Test</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
margin: 20px;
line-height: 1.6;
}
.test-section {
margin: 20px 0;
padding: 20px;
border: 2px solid #ddd;
border-radius: 8px;
}
.test-section h2 {
margin-top: 0;
}
.status {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.pass {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.fail {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.info {
background-color: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
ul {
margin: 10px 0;
}
li {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>Auto-Refresh Edit Mode Test Plan</h1>
<div class="test-section">
<h2>Test Scenario: Auto-refresh behavior during task editing</h2>
<div class="status info">
<strong>Goal:</strong> Verify that auto-refresh stops when entering edit mode and resumes when exiting edit mode
</div>
<h3>Test Steps:</h3>
<ol>
<li>
<strong>Setup:</strong>
<ul>
<li>Start the task viewer application</li>
<li>Select a profile with tasks</li>
<li>Enable auto-refresh with a short interval (5-10 seconds)</li>
</ul>
</li>
<li>
<strong>Test Auto-refresh in Normal Mode:</strong>
<ul>
<li>Wait for auto-refresh to trigger (watch console logs)</li>
<li>Verify tasks refresh automatically</li>
<li>Expected: Console shows "Auto-refreshing tasks every Xs..." messages</li>
</ul>
</li>
<li>
<strong>Test Auto-refresh Stops in Edit Mode:</strong>
<ul>
<li>Click the edit button (✏️) on any task</li>
<li>Enter task edit view</li>
<li>Start editing the task details</li>
<li>Wait for the auto-refresh interval to pass</li>
<li>Expected: No auto-refresh occurs, no console messages about refreshing</li>
<li>Expected: Your edits are NOT interrupted</li>
</ul>
</li>
<li>
<strong>Test Auto-refresh Resumes After Edit:</strong>
<ul>
<li>Exit edit mode by clicking "Back" or saving changes</li>
<li>Return to the task list view</li>
<li>Wait for the auto-refresh interval</li>
<li>Expected: Auto-refresh resumes, console shows refresh messages again</li>
</ul>
</li>
<li>
<strong>Test Detail View (non-edit):</strong>
<ul>
<li>Click on a task to view details (not edit)</li>
<li>Stay in detail view</li>
<li>Expected: Auto-refresh should continue normally</li>
</ul>
</li>
</ol>
<h3>Expected Results:</h3>
<div class="status pass">
<ul>
<li>✓ Auto-refresh works normally when viewing task list</li>
<li>✓ Auto-refresh STOPS when in edit mode</li>
<li>✓ No data loss or interruption while editing</li>
<li>✓ Auto-refresh RESUMES when exiting edit mode</li>
<li>✓ Console logs confirm refresh behavior</li>
</ul>
</div>
<h3>Console Commands for Testing:</h3>
<pre style="background: #f4f4f4; padding: 10px; border-radius: 4px;">
// To monitor auto-refresh in browser console:
console.log('Monitoring auto-refresh...');
// Check if refresh is happening (watch for network requests):
// Network tab → Filter by "tasks" → Watch for periodic requests
// The console should show:
// - "Auto-refreshing tasks every Xs..." when refresh occurs
// - No such messages when in edit mode
</pre>
</div>
<div class="test-section">
<h2>Implementation Summary</h2>
<p>The following changes were made to implement this feature:</p>
<ul>
<li><strong>App.jsx:</strong>
<ul>
<li>Added <code>isInEditMode</code> state</li>
<li>Modified auto-refresh useEffect to check <code>!isInEditMode</code></li>
<li>Updated <code>onDetailViewChange</code> callback to accept edit mode parameter</li>
<li>Pass <code>profileId</code> prop to TaskTable</li>
</ul>
</li>
<li><strong>TaskTable.jsx:</strong>
<ul>
<li>Accept <code>profileId</code> prop</li>
<li>Update <code>onDetailViewChange</code> calls to include edit mode status</li>
<li>Pass <code>profileId</code> to TaskEditView component</li>
</ul>
</li>
</ul>
</div>
</body>
</html>